javascript - ReactJS:更新对象状态内的数组不会触发重新渲染
问题描述
我有一个具有状态对象的反应钩子函数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 没有将其视为正确更新有关,因此它不会重新渲染,但我不知道为什么。
解决方案
它没有更新,因为您正在更改items
内部的数组,并且 React 仅在指向更改apiDATA
的指针时重新渲染。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
}
});
}
推荐阅读
- git - 如何使用 GitLab 在服务器端触发 git 钩子
- xamarin.forms - Web 服务调用已停止处理
- database - 我的 H2/C3PO/Hibernate 设置似乎没有保留准备好的语句?
- ios - 基本视图占用过多 CPU
- html - 拖动时退出禁止光标
- netsuite - ReferenceError - 未定义上下文 (Netsuite)
- java - Gradle.properties 未传递到我的 Java 应用程序
- windows - 为什么 signtool.exe 以管理员身份运行时只能找到证书?
- mysql - 全新安装后无法设置mysql root密码
- android - 辅助功能服务:获取可以即时交互的视图(与语音访问相同)?