Question

嗨，我正在尝试更新嵌套的 2d 板字段状态，但没有成功。

有没有更简单的方法来存储二维数组？

forecast

将更新功能改成这个

<块引用>

const 更新 = () => { const newState = [...state.board]; newState[0][0] = 'G'; }

实际上是做更新状态，但是我不明白为什么，我不是刚刚创建了深层 state.board 副本吗？为什么操纵这个深拷贝实际上会改变我的 state.board？

Answer 1

您的状态是一个对象，而您的棋盘是该对象的一个属性。当你这样做时：

setState(prevState => ({...prevState, board[0,0]: 'G'})

您正在尝试将值为 board[0,0] 的 G（会引发错误）属性设置为您的 state，而不是修改您的 board 数组。

您需要先复制您的电路板。您还可以复制要修改的嵌套数组。那么你可以将你的下一个状态返回为：

    setState(prevState => {
      const newBoard = [...prevState.board];
      newBoard[0] = [...newBoard[0]];
      newBoard[0,0] = 'G';
      return { ...prevState, board: newBoard }
    })

使用钩子，您可以将您的状态分解为多个状态，而不是将所有状态存储在一个状态对象中。最好独立处理状态块。

无论如何，要更新数组，您仍然需要创建一个副本，然后更改所需的索引：

export default function Game() {
    const [board, setBoard] = useState([
            [null, "B", null, "B", null, "B", null, "B"],
            ["B", null, "B", null, "B", null, "B", null],
            [null, "B", null, "B", null, "B", null, "B"],
            ["X", null, "X", null, "X", null, "X", null],
            [null, "X", null, "X", null, "X", null, "X"],
            ["G", null, "G", null, "G", null, "G", null],
            [null, "G", null, "G", null, "G", null, "G"],
            ["G", null, "G", null, "G", null, "G", null],
        ]);
    const [greyTurn, setgreyTurn] = useState(true);
    const [chess, setChess] = useState(null);
    const [dest, setDest] = useState(null);

    const updateBoard = () => {
        setBoard(prevBoard => {
          const board = [...prevBoard];
          board[0] = [...board[0]];
          board[0,0] = 'G';
          return board;
        })
    }

更新反应 useState 钩子嵌套的二维数组

1 个答案: