基本上标题概括了一切,我正在向孩子发送道具并且有所不同。我在渲染父级之前制作了一个 console.log
并且道具没问题,并在 Child 组件的开头制作了一个相同道具的 console.log
并且它是不同的。
这是父级:
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;
这就是孩子(我从孩子身上删除了大部分东西,因为在收到错误的道具后,其他一切都是错误的,当我使用模拟道具时,它可以工作):
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 中得到的内容相匹配;但是,在子组件中,显然会再次转到该方法不会向我显示 console.log,因此我不确定它是否真的在运行该方法。
答案 0 :(得分:0)
我设法通过使用 setState
解决了这个问题,正如 Linda 所评论的那样。
这样:
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
。