我正在尝试创建一个数组来存储每次单击时 square 的值。然后我可以使用该数组来实现游戏逻辑。但每次我点击正方形时,它都会重新渲染并显示错误的空白页面
TypeError: Cannot read properties of undefined (reading 'value')
import React, { useState } from "react";
const App = () => {
const [turn, setTurn] = useState(false);
const [square, setSquare] = useState(Array(9).fill({value: null, isClick: false}))
return (
<div>
<h1>Turn: {turn ? "O" : "X"}</h1>
<div className="board-row">
<Square turn={turn} setTurn={setTurn} square={square[0]} setSquare={setSquare} />
<Square turn={turn} setTurn={setTurn} square={square[1]} setSquare={setSquare} />
<Square turn={turn} setTurn={setTurn} square={square[2]} setSquare={setSquare} />
</div>
<div className="board-row">
<Square turn={turn} setTurn={setTurn} square={square[3]} setSquare={setSquare} />
<Square turn={turn} setTurn={setTurn} square={square[4]} setSquare={setSquare} />
<Square turn={turn} setTurn={setTurn} square={square[5]} setSquare={setSquare} />
</div>
<div className="board-row">
<Square turn={turn} setTurn={setTurn} square={square[6]} setSquare={setSquare} />
<Square turn={turn} setTurn={setTurn} square={square[7]} setSquare={setSquare} />
<Square turn={turn} setTurn={setTurn} square={square[8]} setSquare={setSquare} />
</div>
</div>
);
};
export default App;
const Square = ({ turn, setTurn, square, setSquare }) => {
const clickHandle = () => {
if (!square.isClick) {
setSquare({value: turn ? "O" : "X", isClick: true})
setTurn(!turn);
}
};
return (
<div>
<button className="square" onClick={clickHandle}>
{square.value}
</button>
</div>
);
};
我尝试通过 console.log 进行调试,但不知为何
square
状态未定义。
当你设置状态时,你将它设置为单个对象,这是错误的,因为你最初采用的是一个数组,所以它应该是一个对象数组,你只需要更新你点击的那个特定对象。
CODESANDBOX
const clickHandle = () => {
if (!square.isClick) {
setSquare((oldValues) => {
return oldValues.map((o, i) => {
return i === index
? {
...o,
value: turn ? "O" : "X",
isClick: true
}
: o;
});
});
setTurn(!turn);
}