[英]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.