我在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不可迭代(无法读取属性Symbol(Symbol.iterator((在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;