![](/img/trans.png)
[英]React Native child component does not receive updated state from parent
[英]React Child component not sent the updated state from parent
我正在尝试遵循他们官方网站上的反应教程: https : //reactjs.org/tutorial/tutorial.html
唯一的区别是我试图仅使用功能组件来实现它,这是我在代码笔上的代码:
请参阅CodePen上Snedden Gonsalves ( @snedden-gonsalves ) 的 Pen React 教程功能组件。
总结; 我有一个绘制单个方块的简单方块组件,一个绘制 3x3 方块的父面板组件和一个维护状态的总体游戏组件,如教程中的历史、当前方块、当前回合等。 我目前将方块从父游戏组件发送到板组件,如下所示:
<Board
onClick ={(i)=>{handleClick(i)}}
squares = {state.history[state.history.length - 1]}
/>
handleClick 创建新的方块状态并将其附加到我认为应该动态传递的历史数组中,因为我还传递了数组中的最后一个条目,但它看起来根本没有将最后一个条目传递给子组件。 不知道发生了什么..
谢谢你的时间。
成分:
正方形:
const Square = (props)=>{
return(
<button className="square" onClick={(e)=>props.onClick()}>
{props.value}
</button>
)
}
木板:
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>
)
}
游戏:
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>
);
}
所以事实证明它正在传递更新的状态我没有使用正确的键,这就是我修复它的方式:
<Board
onClick ={(i)=>{handleClick(i)}}
squares = {state.history[state.history.length - 1].squares}/>
工作码笔:
见笔阵营教程功能部件工作由斯内登贡萨尔维斯( @斯内登-贡萨尔维斯上) CodePen 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.