React映射函数停止处理状态更新

Question

我正试图使用React Hooks对处于状态的对象进行更新，但当我尝试更新Objet时，函数.map停止工作。

首先，我有这个handleCheckedFilterChange函数，它改变了状态Object，但组件没有重新渲染：

const handleCheckedFilterChange = (name) => {
let prevFilters = filters;
for (let filter in prevFilters) {
if (prevFilters[filter].name === name) {
prevFilters[filter].checked = !prevFilters[filter].checked;
prevFilters[filter].filters.map((value) => {
value.disabled = !value.disabled;
});
setFilters(prevFilters);
break;
}
}
};

然后我把它改成这个，使组件再次渲染：

const handleCheckedFilterChange = (name) => {
let prevFilters = { ...filters };
for (let filter in prevFilters) {
if (prevFilters[filter].name === name) {
prevFilters[filter].checked = !prevFilters[filter].checked;
prevFilters[filter].filters.map((value) => {
value.disabled = !value.disabled;
});
setFilters(prevFilters);
break;
}
}
};

但第二个错误给我带来了一个错误：

类型错误：filters.map不是函数

错误是当我调用以下内容时：

const renderCards = filters.map((filter) => (
<div className="card text-center">
...
</div>
));

Answer 1

在第一个选项中，您试图直接修改React的useState中不允许的状态，这就是为什么它没有呈现您预期的更改。

第二个选项的问题是您正在尝试使用{}而不是[]。试用：

let prevFilters = [ ...filters ];

背后的原因是.map()是数组上的函数，而不是对象上的函数。