在反应中使用 useState 挂钩更改值、添加和删除深层嵌套对象的字段

Question

嵌套状态对象是这样的：

 key1: {
      key2: [
        {
          field1: "value",
          field2: ["value", "value"],
          field3: [
            {
              ff1: "val",
              ff2: ["val"],
              ff3: [
                [{ f1: "v", f2: 1 },
                 { f1: "v", f2: 2 
                 }],
                [
                  { f1: "v", f2: 1 },
                  { f1: "v", f2: 2 },
                ],
              ],
            },
          ],
        },
      ],
    }

我只是想不通应该如何使用 useState 钩子集函数更新状态。

前提是更新级别是：

key1.key2
key1.key2[index].field1 = value
key1.key2[index].field2[index] = value
key1.key2[index].field3[index].ff2[index] = value
key1.key2[index].field3[index].ff3[index][index].key = value

以及添加和删除这些级别中的键值对！

Answer 1

您可以深度复制当前状态，进行所需的更改，然后传回 setter。

LoDash 克隆深度：https://lodash.com/docs/4.17.15#cloneDeep

另一种选择是使用 immer。该库允许您使用看似修改现有对象但实际上生成新对象而没有完整深拷贝的代码。

沉浸式示例：https://immerjs.github.io/immer/

Answer 2

假设您的州声明如下：

const [key, setKey1] = useState(initialState);

您可以使用 setKey1 函数为您提供实际状态，对其进行更改，然后 return 就这样：

setKey1(oldState => {
  oldState.key2[0].field1 = "test";
  oldState.key2[0].field2[0] = "test";
  oldState.key2[0].field3[0].ff2[0] = "test";
  oldState.key2[0].field3[0].ff3[0][0].key = "test";

  //adding
  oldState.key2[0].field2.push('new_value');
  
  //deleting
  delete oldState.key2[0].field3[0].ff3[0][0].f1;

  return {...oldState};
});

您可以找到一个可用的代码笔 here

在反应中使用 useState 挂钩更改值、添加和删除深层嵌套对象的字段

Change value, add and remove fields of deep nested object with useState hook in react

reactjs

next.js

react-hooks

use-state