[英]React Child component not sent the updated state from parent
I am trying to follow the react tutorial on their official site: https://reactjs.org/tutorial/tutorial.html我正在尝试遵循他们官方网站上的反应教程: https : //reactjs.org/tutorial/tutorial.html
Only difference is I am trying to implement it by only using functional components, here is my code on code pen:唯一的区别是我试图仅使用功能组件来实现它,这是我在代码笔上的代码:
See the Pen React tutorial functional component by Snedden Gonsalves ( @snedden-gonsalves ) on CodePen .请参阅CodePen上Snedden Gonsalves ( @snedden-gonsalves ) 的 Pen React 教程功能组件。
To summarize;总结; I have simple square component that draws individual squares, a parent board component that draws a 3x3 square board and an overarching game component that maintains state ,like history, current square, current turn etc as in the tutorial.我有一个绘制单个方块的简单方块组件,一个绘制 3x3 方块的父面板组件和一个维护状态的总体游戏组件,如教程中的历史、当前方块、当前回合等。 I currently send the squares from the parent game-component to board components like so :我目前将方块从父游戏组件发送到板组件,如下所示:
<Board
onClick ={(i)=>{handleClick(i)}}
squares = {state.history[state.history.length - 1]}
/> />
The handleClick creates new squares state and appends it to the history array which I assume should be dynamically passed as I also pass the last entry in the array , but it doesn't look it passes the last entry at all to the child components. handleClick 创建新的方块状态并将其附加到我认为应该动态传递的历史数组中,因为我还传递了数组中的最后一个条目,但它看起来根本没有将最后一个条目传递给子组件。 Not sure what is happening..不知道发生了什么..
Thanks for you time.谢谢你的时间。
Components:成分:
Square:正方形:
const Square = (props)=>{
return(
<button className="square" onClick={(e)=>props.onClick()}>
{props.value}
</button>
)
}
Board:木板:
const Board = (props) => {
const renderSquare = (i)=>{
return <Square
value={props.squares[i]}
onClick={() => {
props.onClick(i)
}
}
/>
}
return(
<div>
<div className="board-row">
{renderSquare(0)}
{renderSquare(1)}
{renderSquare(2)}
</div>
<div className="board-row">
{renderSquare(3)}
{renderSquare(4)}
{renderSquare(5)}
</div>
<div className="board-row">
{renderSquare(6)}
{renderSquare(7)}
{renderSquare(8)}
</div>
</div>
)
}
Game:游戏:
const Game = () =>{
let [state, setState] = useState({
history:[{
squares:Array(9).fill(null)
}],
isXNext:true,
status:'Next player X'
});
useEffect(() =>{
const currentSquares = state.history[state.history.length - 1].squares;
const winner = calculateWinner(currentSquares);
if(winner){
setState( state => ({...state, status:'Winner is ' + winner, ended:true}));
}
},[state.history]);
const handleClick = (i) =>{
const currentSquares = state.history[state.history.length - 1].squares;
if(state.ended || currentSquares[i])
return;
const newSquares = currentSquares.slice();
newSquares[i] = state.isXNext?'X':'O';
const newIsXNext = !state.isXNext;
const newHistory = state.history.concat([
{squares:newSquares}]);
setState(state => ({...state,
history: newHistory,
isXNext: newIsXNext,
status:'Next player ' + (newIsXNext?'X':'O')
}));
}
return(
<div className="game">
<div className="game-board">
<Board
onClick ={(i)=>{handleClick(i)}}
squares = {state.history[state.history.length - 1]}
/>
</div>
<div className="game-info">
<div>{state.status}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
So turns out it was passing the updated state I was not using the right key, this is how I fixed it:所以事实证明它正在传递更新的状态我没有使用正确的键,这就是我修复它的方式:
<Board
onClick ={(i)=>{handleClick(i)}}
squares = {state.history[state.history.length - 1].squares}/>
Working code pen:工作码笔:
See the Pen React tutorial functional component Working by Snedden Gonsalves ( @snedden-gonsalves ) on CodePen . 见笔阵营教程功能部件工作由斯内登贡萨尔维斯( @斯内登-贡萨尔维斯上) CodePen 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.