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;
      }
    }
};

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

TypeError：filters.map不是函数

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

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

Answer 1

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

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

let prevFilters = [ ...filters ];

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

React Map函数停止进行状态更新

1 个答案: