React：parent 发送的道具与 child 收到的道具不同

Question

基本上标题总结了所有内容，我正在向 child 发送一个道具，结果有所不同。我在渲染 parent 之前制作了一个 console.log 并且道具没问题，并且在 Child 组件的开头制作了一个相同道具的 console.log 并且它是不同的。

这是parent:

  const Main = () => {
  const carrier = createShip(5);

  // Gameboards setup
  const userPrimaryGrid = createGameboard('primary');
  const userTrackingGrid = createGameboard('tracking');

  userPrimaryGrid.randomPlaceShip(carrier);

  console.log(userPrimaryGrid.array);

  return (
    <div className="main">
      <Gameboard
        type={'primary'}
        board={userPrimaryGrid}
        enemyArray={computerTrackingGrid}
      />
    </div>
  );
};

export default Main;

这是 child（我从 child 中删除了大部分内容，因为在收到错误的道具后，其他一切都是错误的，当我使用模拟道具时它有效）：

const Gameboard = (props) => {

  console.log(props.board.array);

  return (
    <div className={`gameBoard ${props.type}Board`} onClick={props.onClick}>
      {squaresArray} <== this depends on board.array don't worry
    </div>
  );
};

导出默认游戏板；

我怀疑它与parent中的randomPlaceShip方法有关，因为我在child中收到的是一个不同于parent的数组一个，但好像它有自己的 randomPlaceShip （结果是另一个）。 randomePlaceShip 方法如下：

const randomPlaceShip = (ship) => {
    let direction = '';
    let randomDirection = _.random(0, 1);
    let x = _.random(0, 9);
    let y = _.random(0, 9);

    randomDirection === 0
      ? (direction = 'horizontal')
      : (direction = 'vertical');

    console.log(x, y, direction);

    let position = false;
    while (position === false) {
      if (direction === 'horizontal') {
        if (y > 10 - ship.length || array[x][y] !== false) {
          console.log(`cant place ship in ${x},${y}`);
          randomDirection = _.random(0, 1);
          x = _.random(0, 9);
          y = _.random(0, 9);
          randomDirection === 0
            ? (direction = 'horizontal')
            : (direction = 'vertical');
          console.log(x, y, direction);
        } else {
          for (let i = 0; i < ship.length; i++) {
            ship.hitPoints[i].x = x;
            ship.hitPoints[i].y = i + y;
            array[x][i + y] = ship.hitPoints[i];
            position = true;
          }
        }
      }

      if (direction === 'vertical') {
        if (x > 10 - ship.length || array[x][y] !== false) {
          console.log(`cant place ship in ${x},${y}`);
          randomDirection = _.random(0, 1);
          x = _.random(0, 9);
          y = _.random(0, 9);
          randomDirection === 0
            ? (direction = 'horizontal')
            : (direction = 'vertical');
          console.log(x, y, direction);
        } else {
          for (let i = 0; i < ship.length; i++) {
            ship.hitPoints[i].x = i + x;
            ship.hitPoints[i].y = y;
            array[i + x][y] = ship.hitPoints[i];
            position = true;
          }
        }
      }
    }
    console.log(x, y, direction);
  };

方法中的 console.log 与我在 parent 中得到的相匹配；但是，在 apparently 获取另一个方法的 child 组件中不会向我显示 console.log 所以我不确定它是否真的运行方法。

Answer 1

我设法解决了这个问题，正如 Linda 也评论的那样，使用 setState。

这样：

  const [boards, setBoards] = useState({
    userPrimaryGrid: createGameboard('primary'),
    userTrackingGrid: createGameboard('tracking'),
    computerPrimaryGrid: createGameboard('primary'),
    computerTrackingGrid: createGameboard('tracking'),
  });

  const [gameFinished, setGameFinished] = useState(false);

  const [result, setResult] = useState('');

  useEffect(() => {
    fillBoard(boards.userPrimaryGrid);
    fillBoard(boards.computerPrimaryGrid);
    setBoards({
      userPrimaryGrid: boards.userPrimaryGrid,
      userTrackingGrid: boards.userTrackingGrid,
      computerPrimaryGrid: boards.computerPrimaryGrid,
      computerTrackingGrid: boards.computerTrackingGrid,
    });
  }, [
    boards.computerPrimaryGrid,
    boards.computerTrackingGrid,
    boards.userPrimaryGrid,
    boards.userTrackingGrid,
  ]);

在这种情况下，函数 fillBoard 包含函数 randomePlaceShip 对需要玩的所有五艘船完成。

React：parent 发送的道具与 child 收到的道具不同

React: Props sent by parent are not the same received by child

javascript

reactjs

react-props

react-component