Javascript 如何在React中使用此状态？

我是一个相当新的反应，我有以下代码

   import './App.css';
import { useState, useEffect } from 'react'


function Box(props) {
  return (<button className="cell" onClick={() => props.handleClick(props.index)}>{props.children}</button>); 
}
function PlayGrid(props){
  
  //console.log("props in playgrid: " ,props);

  return (
    <div className="grid" id="playGrid">
        {props.history.squares.map( (cell, index) => {
          //console.log("cell: ", cell);
          return (<Box index={index} handleClick={props.squareClick} key={index} className="cell">{cell}</Box>);
        })}
    </div>
    );
}

function Game() {
  const [history, setHistory] = useState([{squares: Array(9).fill(null)}]);
  const [turnCount, setTurnCount] = useState("X");
  const [winner, setWinner] = useState(null);

  const moves = history.map((object, index) => {
    const description = index === 0 ? "Go to start" :  "Go to move " + (index);
    return(<li>
      <button onClick = {() => jumpTo(index + 1)}>{description}</button>
      </li>);
  }); //we will use a map feature that maps each move to a button.
  
  function didSomeoneWin(squares){
    console.log("history: ", history, " squares: ", squares);
    const lines = [
      [0,1,2],
      [3,4,5],
      [6,7,8],
      [0,3,6],
      [1,4,7],
      [2,5,8],
      [0,4,8],
      [6,4,2],
    ];
    lines.forEach((line) => {
      const [a,b,c] = line;
      if (squares[a] && squares[a] === squares[b] && squares[b] === squares[c]){
        console.log("SOMEONE WON!");
        setWinner(squares[a]); // return the winner: X or O
        console.log("Squares[a]: ", squares[a], "WINNER IS NOW: ", winner);
      }
      else {
        setWinner(null);
      }
    })
  }

  function squareClick(i){
    if (winner !== "X" && winner !== "O"){
      //TODO: Fix this function by resolving the async issues. posted on SO.
      console.log("winner: ", winner);
      setTurnCount(history.length % 2 === 0 ? "X" : "O");   
      const current = history[history.length - 1];
      const squares = current.squares.slice();
      if (squares[i]){
        return;
      }
      squares[i] = turnCount;
      console.log(i);
      console.log("history before: ", history[history.length - 1]);
      setHistory(history.concat([{ squares: squares }]));
      console.log("history after: ", history[history.length - 1]);
      didSomeoneWin(squares);
    }
  }

  function jumpTo(i) {
    const newHistory = history.slice(0, i);
    setHistory(newHistory);
    didSomeoneWin();
  }

  return (
  <div className="row">
    <div className="column">
      <div>Current Turn: {turnCount}</div>
      <ol>{moves}</ol>
    </div>
    <div className="column">
      <PlayGrid squareClick={squareClick} history={history[history.length - 1]}/>
    </div>
  </div>
  );
}

function App(){
  return(<Game/>);
}

export default App;

import'/App.css'；
从“react”导入{useState，useEffect}
功能盒（道具）{
return（props.handleClick（props.index）}>{props.children}）；
}
功能PlayGrid（道具）{
//log（“playgrid中的道具：”，道具）；
返回(
{props.history.squares.map（（单元格，索引）=>{
//日志（“单元格：，单元格”）；
返回（{cell}）；
})}
);
}
函数游戏（）{
const[history，setHistory]=useState（[{squares:Array（9）.fill（null）}]）；
常数[turnCount，setTurnCount]=useState（“X”）；
const[winner，setWinner]=useState（null）；
const moves=history.map（（对象，索引）=>{
const description=index==0？“转到开始”：“转到移动”+（索引）；
返回（

跳转到（索引+1）}>{description}
）；
}); //我们将使用映射功能，将每个移动映射到一个按钮。
函数didsomenewin（平方）{
日志（“历史：”，历史，“方块：”，方块）；
常量行=[
[0,1,2],
[3,4,5],
[6,7,8],
[0,3,6],
[1,4,7],
[2,5,8],
[0,4,8],
[6,4,2],
];
行。forEach（（行）=>{
常数[a，b，c]=直线；
如果（正方形[a]&正方形[a]==正方形[b]&正方形[b]==正方形[c]）{
日志（“有人赢了！”）；
setWinner（正方形[a]）；//返回获胜者：X或O
log（“方块[a]：”，方块[a]，“赢家现在是：”，赢家）；
}
否则{
setWinner（null）；
}
})
}
函数（i）{
如果（获胜者！=“X”&&winner！=“O”）{
//TODO:通过解决异步问题修复此函数。已在SO上发布。
console.log（“winner:，winner”）；
setTurnCount（history.length%2==0？“X”：“O”）；
const current=history[history.length-1]；
const squares=当前的.squares.slice（）；
if（平方[i]）{
返回；
}
平方[i]=转数；
控制台日志（i）；
log（“之前的历史：”，历史[history.length-1]）；
setHistory（history.concat（[{squares:squares}]）；
log（“history after:”，history[history.length-1]）；
DidsomeneWin（正方形）；
}
}
功能跳转至（i）{
const newHistory=history.slice（0，i）；
setHistory（newHistory）；
有人赢了吗；
}
返回(
当前回合：{turnCount}
{moves}
);
}
函数App（）{
return（）；
}
导出默认应用程序；

我的squareClick（I）方法有一个问题，无法从状态中获取赢家，可能是因为状态存在某种异步问题。如何在代码中解决此问题

其他文字，以便我的帖子可以被张贴：Lorem ipsum dolor sit Ametlore ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

---

Lorem ipsum dolor sit amet

如果您想知道为什么这条线不起作用：

console.log（“方块[a]：”，方块[a]，“赢家现在是：”，赢家）；

这是因为当这一行执行时，

winner

状态尚未设置，因此它仍然为空。您不应该在这里进行控制台日志记录，而应该查看您实际想要对状态执行的操作，并将其与

useffect

相结合

useffect（（）=>{
console.log（获胜者）；
}，[获胜者]}

上面的代码段表示当

winner

的值更改时，将运行回调

您还可以向return语句添加一些html输出，以查看值是否正在更新：

返回(
获胜者：{Winner}
...
)

squareClick

squareClick在哪里被调用？你能包括你的渲染方法吗？对不起，我刚刚添加了完整的代码。它是从我的square函数组件调用的？你在
jumpTo
中对
didsomenewin
的调用没有传递变量
I
谢谢。我继续并修复了它。然而，获胜者是直到调用squareClick（i）时为null。感谢您的输入。但是，中心问题是没有设置“winner”。正在设置它，请参见以下代码沙盒：，您只是认为它没有被设置，因为您正在更新react状态之前进行控制台日志记录。