react实现井字棋包含悔棋功能

import { useState } from 'react';

function Square({value,onSquareClick}) {//使用按键作为棋盘格子

return <button className="square" onClick={onSquareClick}>

{value}

</button>;

}

export default function Board() {

const [squares, setSquares] = useState(Array(9).fill(null));//9个按钮，构成整个棋盘

const [xIsNext, setXIsNext] = useState(true);//判定下一个棋手是X还是O

const [history,setHistory]=useState([]);//存储每一步的棋盘情况，用于实现悔棋

function handleClick(i) {

if (squares[i] || calculateWinner(squares)) {//如果格子已经有旗子或者已经有人胜利，则不再改变棋盘

return;

}

const newHistory=history.slice();

newHistory.push(squares.slice());

setHistory(newHistory);//在下每一步棋前，现将当前棋盘保存在history数组的末尾，用于悔棋读取

不能直接使用history.push(squares.slice())

因为在react中，状态更新是不可变操作，也就使用const [history,setHistory]=useState([]);钩子函数定义的数组history的状态不能被直接改变，不能改变状态变量的内部结构，而应该创建一个新的状态对象或数组，并用这个新的状态替换旧的状态。也即使用setHistory来重新定义history的状态

console.log(history[history.length-1]);

const nextSquares = squares.slice();

if(xIsNext){

nextSquares[i] = "X";

}

else{

nextSquares[i] = "O";

}

setSquares(nextSquares);

setXIsNext(!xIsNext);//每次下棋后，获取棋盘最新状态，并更换棋手

}

function handBackClick() {

if (history.length > 0) {//每次点击悔棋按钮，读取history中最后一个数据，也即上一步的棋盘情况

setSquares(history[history.length-1]);

const last=history.slice();

last.pop();

setHistory(last);

setXIsNext(!xIsNext);//悔棋后，下棋的棋手也要返回成另一个人

}

}

const winner = calculateWinner(squares);

let status;

if (winner) {

status = "Winner: " + winner;

}

else {

status = "Next player: " + (xIsNext ? "X" : "O");

}

return (

<>

<div>

<button className="goback" onClick={handBackClick}>返回上一步</button>

</div>

<div className="status">{status}</div>

<div className="board-row">

<Square value={squares[0]} onSquareClick={() => handleClick(0)} />

<Square value={squares[1]} onSquareClick={() => handleClick(1)} />

<Square value={squares[2]} onSquareClick={() => handleClick(2)} />

</div>

<div className="board-row">

<Square value={squares[3]} onSquareClick={() => handleClick(3)} />

<Square value={squares[4]} onSquareClick={() => handleClick(4)} />

<Square value={squares[5]} onSquareClick={() => handleClick(5)} />

</div>

<div className="board-row">

<Square value={squares[6]} onSquareClick={() => handleClick(6)} />

<Square value={squares[7]} onSquareClick={() => handleClick(7)} />

<Square value={squares[8]} onSquareClick={() => handleClick(8)} />

</div>

</>

);

}

function calculateWinner(squares) {//判定是否有棋手获胜，若有则返回棋手是X还是O

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;

}