反應 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 而不是對象。