反应 map function 停止工作 state 更新

Question

I'm trying to make an update on an Object that is in the state using React Hooks, but when I try to update the Objet the function .map stop working.

首先我有这个handleCheckedFilterChange function 并且它改变了 state 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;
      }
    }
};

但是第二个给我一个错误：

类型错误：过滤器。map 不是 function

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

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

Answer 1

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

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

let prevFilters = [ ...filters ];

背后的原因是.map()是 arrays 上的 function 而不是对象。