Reactjs 使用react中的useState钩子更改深嵌套对象的值、添加和删除字段

嵌套状态对象如下所示：

 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 },
                ],
              ],
            },
          ],
        },
      ],
    }

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

我只是想不出应该如何用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

---

还可以添加这些级别中的键值对和删除这些级别中的键值对

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

LoDash Clone Deep：

另一个选择是使用。此库允许您使用看似修改现有对象但实际上生成新对象而没有完整深度副本的代码

---

Immer示例：

假设您的状态声明如下：

 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 },
                ],
              ],
            },
          ],
        },
      ],
    }

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

您可以使用setKey1函数，该函数将为您提供实际状态，对其进行更改并按如下方式返回：

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};
});

---

您可以找到一个工作代码笔

这是不可靠的，因为更新函数返回相同的对象。一种更可靠的方法是在末尾返回一个新对象，它保证React将重新返回：

return{…oldstate}

True。Codepen Updated这是该任务最简单的解决方案。但对于未来的最佳实践，我会选择伊默@TanguyRoberjot非常感谢您的回复，也确认了我对状态更新的最初想法。您能提供一个示例代码吗？@Saikatey我更新了答案，添加了每个示例的链接。我使用的是immer，效果很好。非常感谢。