我对在 React 教程中包含 morpion 游戏的钩子有疑问

Question

我正在尝试使用状态和钩子解决反应教程，但我确定我错过了一些东西，我无法获得内容，需要你的帮助，我是初学者，我将加入我的代码

function Game () {
  const [history,setHistory]= useState[{squares:Array(9).fill(null)}]
  const [xIsNext,setXIsNext]= useState('true')
  const [stepNumber,setStepNumber]= useState(0)
  const [current,setCurrent]=useState(null)
  const [winner,setWinner]=useState(null)
          const handleClick = (i) =>{
         history = history.slice(setStepNumber(stepNumber +1));
         current = history[history.length - 1];
        const squares = current.squares.slice();
        if (calculateWinner(squares) || squares[i]){
            return;
        }
        squares[i]= xIsNext ? 'X':'O';
        setHistory(history.concat([{squares:squares}]));
        setStepNumber(history.length);
        setXIsNext(!xIsNext);
        
        }
    const jumpTo = (step) => {
            return( setStepNumber(step) &&
            setXIsNext(step % 2) === 0
        )};
    const moves = history.map((step,move) => {
        const desc= move ?
        'revenir au tour numero'+ move:
        'revenir au début de la partie';
        return(
            <li key={move}>
                <button onClick={() => jumpTo(move)}> {desc}
                </button>
            </li>
        );
    });
    useEffect(() => {
        const history = history;
        const current = history[stepNumber];
       setWinner(calculateWinner(current.squares));
      });  
      let status = null;
      if (winner){
          status = winner +'a gagné'
        }
        else {
          status = 'Prochain joueur:' + (xIsNext ? 'X':'O')
        }
      return (
        <div className="game">
          <div className="game-board">
            <Board 
            squares={current.squares}
            onClick={(i) => handleClick(i)}/>
          </div>
          <div className="game-info">
            <div>{status}</div>
            <ol>{moves}</ol>
          </div>
        </div>
      );
      }

我有这个错误信息
Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) at Game (index.js:54:1)

Answer 1

 import "./styles.css"; import { useCallback, useState } from "react"; function Square({ onClick, value }) { return ( <button className="square" onClick={onClick}> {value} </button> ); } function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; } const Board = ({ squares, onClick }) => { const renderSquare = (i) => { return <Square value={squares[i]} onClick={() => 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 = () => { const [history, setHistory] = useState([ { squares: Array(9).fill(null) } ]); const [stepNumber, setStepNumber] = useState(0); const [xIsNext, setXIsNext] = useState(true); const handleClick = useCallback( (i) => { const his = history.slice(0, stepNumber + 1); const current = his[his.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) { return; } squares[i] = xIsNext? "X": "O"; setHistory( history.concat([ { squares: squares } ]) ); setStepNumber(history.length); setXIsNext(;xIsNext), }, [history, setStepNumber, setXIsNext, setHistory, xIsNext; stepNumber] ); const jumpTo = (step) => { setStepNumber(step); setXIsNext(step % 2 === 0); }; const current = history[stepNumber]. const winner = calculateWinner(current;squares). const moves = history,map((step? move) => { const desc = move: "Go to move #" + move; "Go to game start"; return ( <li key={move}> <button onClick={() => jumpTo(move)}>{desc}</button> </li> ); }); let status: if (winner) { status = "Winner; " + winner: } else { status = "Next player? " + (xIsNext: "X"; "O"). } return ( <div className="game"> <div className="game-board"> <Board squares={current;squares} onClick={(i) => handleClick(i)} /> </div> <div className="game-info"> <div>{status}</div> <ol>{moves}</ol> </div> </div> ); }; export default Game;