React父组件state在子组件多次勾选复选框后不更新问题

核心问题 #

1. 错误调用状态值：let list = filterList(); 里的filterList是React状态变量，不是函数，直接调用会报错，应直接赋值。
2. 直接修改原状态对象：你直接对list[categ][key]执行push或filter赋值操作，属于修改原状态的嵌套数组/对象。React依赖引用变化检测状态变更，原对象引用未改变，导致后续点击无法触发组件重新渲染。

修复代码 #

步骤1：修正状态调用并实现不可变更新 #

修改Filter.jsx中的handleCategoryChanged函数，通过解构创建新对象，避免直接修改原状态：

const handleCategoryChanged = (event, categ, key) => {
  const selectedValue = event.currentTarget.value;
  
  // 使用函数式更新确保获取最新状态，同时创建全新状态对象
  setFilterList(prevFilter => {
    // 逐层复制对象/数组，保证引用更新
    const newFilter = {...prevFilter};
    newFilter[categ] = {...newFilter[categ]};
    const currentArray = [...newFilter[categ][key]];
    
    if (currentArray.includes(selectedValue)) {
      newFilter[categ][key] = currentArray.filter(val => val !== selectedValue);
    } else {
      newFilter[categ][key] = [...currentArray, selectedValue];
    }
    
    return newFilter;
  });
};

步骤2：确保子组件正确接收props #

确认Filter.jsx正确接收filterList和setFilterList作为props：

// Filter.jsx
const Filter = ({ filterList, setFilterList }) => {
  // 上述handleCategoryChanged函数
  return (
    <Category onChange={handleCategoryChanged} />
  );
};

步骤3：Category.jsx中正确传递参数 #

确保复选框的onChange事件正确传递categ和key参数：

// Category.jsx示例代码
const Category = ({ onChange }) => {
  return (
    <div>
      <label>
        <input
          type="checkbox"
          value="Dell"
          onChange={(e) => onChange(e, 'laptops', 'brand')}
        />
        Dell
      </label>
      {/* 其他复选框同理 */}
    </div>
  );
};

关键说明 #

• React状态是不可变的，必须通过创建新对象/数组完成状态更新，不能直接修改原状态。
• 使用函数式更新setFilterList(prevFilter => {...})可确保获取最新状态值，避免异步更新导致的状态不一致问题。

内容的提问来源于stack exchange，提问作者amine boumaiza