ReactJS：更新对象状态内的数组不会触发重新渲染

Question

我有一个具有状态对象的 react hooks 函数apiDATA。在这种状态下，我存储了一个结构对象：

{
name : "MainData", description: "MainData description", id: 6, items: [
{key: "key-1", name : "Frontend-Test", description: "Only used for front end testing", values: ["awd","asd","xad","asdf", "awdr"]},
{key: "key-2", name : "name-2", description: "qleqle", values: ["bbb","aaa","sss","ccc"]},
...
]
}

我的前端将对象的主要数据显示为标题，然后我将每个项目映射到items. 对于这些项目中的每一个，我需要显示values它们并使它们可编辑。我在下面附上了一张图片。

现在你可以看到我有一个加号按钮，我用它来添加新的values. 我为此使用了模态，当我调用该函数来更新状态时，它可以正常工作并正确重新渲染。现在，对于每个单词，values我都有那个芯片，旁边有删除按钮。该按钮的删除功能如下：

const deleteItemFromConfig = (word, item) => {
    const index = apiDATA.items.findIndex((x) => x.key === item.key);

    let newValues = item.value.filter((keyWord) => keyWord !== word);

    item.value = [...newValues];

    api.updateConfig(item).then((res) => {
      if (res.result.status === 200) {
        let apiDataItems = [...apiDATA.items];
        apiDataItems.splice(index, 1);
        apiDataItems.splice(index, 0, item);
        apiDATA.items = [...apiDataItems];
        setApiDATA(apiDATA);
      }
    });
  };

不幸的是，当我更新状态时，这个函数不会重新渲染。它只在我更新其他状态时重新渲染。我知道代码有点蹩脚，但我尝试了一些方法让它重新渲染，但我无法绕过它。我知道这与 React 没有将其视为正确更新有关，因此它不会重新渲染，但我不知道为什么。

Answer 1

它不会更新，因为您正在更改items里面的数组apiDATA，并且 React 仅在指向apiDATA更改的指针时重新渲染。React 不会比较apiDATA.

你必须创建一个新的apiDATA来进行 React 更新。

尝试这个：

      if (res.result.status === 200) {
        let apiDataItems = [...apiDATA.items];
        apiDataItems.splice(index, 1);
        apiDataItems.splice(index, 0, item);
        setApiDATA(prevState => {
            return {
                ...prevState,
                items: apiDataItems
            }
       });
      }