时间戳

首页 > 解决方案 > 反应地图功能停止工作状态更新

javascript - 反应地图功能停止工作状态更新

问题描述

我正在尝试使用 React Hooks 对处于状态的对象进行更新，但是当我尝试更新 Objet 时，该功能.map停止工作。

首先我有这个handleCheckedFilterChange功能，它改变了状态对象，但组件没有重新渲染：

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

标签： javascriptreactjsobjectreact-hooks

解决方案

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

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

let prevFilters = [ ...filters ];

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

推荐阅读