javascript - 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 中。对于每个项目，我需要显示值并使其可编辑。我在下面附上了一张图片。

现在，如您所见，我有一个加号按钮，用于添加新的值。我为此使用了一个模态，当我调用该函数来更新状态时，它做得很好并且正确地重新渲染。现在，对于值中的每个单词，我都有一个带有删除按钮的芯片。该按钮的删除函数如下:

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

它不会更新，因为您正在更改apiDATA内的数组items，并且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
            }
       });
      }