更新反应 useState 挂钩嵌套二维数组答案

【问题标题】：Updating react useState hook nested 2d array更新反应 useState 挂钩嵌套二维数组
【发布时间】：2021-05-13 08:17:30
【问题描述】：

您好，我正在尝试更新我的嵌套二维板字段状态，但没有成功。

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

export default function Game() {
    const [state, setState] = useState({
        board: [
            [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],
        ],
        greyTurn: true,
        chess: null,
        dest: null,
    });




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


return (
<>
   <button onClick={update}></button>
<>
)

把更新功能改成这个

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

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

【问题讨论】：

标签： reactjs react-hooks state use-state

【解决方案1】：

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

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

您正在尝试为您的state 设置一个值为G 的board[0,0]（这将引发错误）属性，而不是修改您的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;
        })
    }

【讨论】：

我正试图在一个状态下管理所有这些，所以这个解决方案现在对我有用。

【解决方案2】：

import React, {useState} from 'react';

export default function Game() {
  const [state, setState] = useState({
    board: [
      [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],
    ],
    greyTurn: true,
    chess: null,
    dest: null,
  });

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

  return (
    <>
      <button onClick={update}></button>
    </>
  );
}

这是更新棋盘中第一个数组的第一个索引的方法。

【讨论】：