更新factoryQuery后如何触发ProcurementList渲染更新后的列表

问题背景 #

当用户勾选复选框时，factoryQuery数组会更新，需求是让ProcurementsList组件调用search函数重新筛选procurements数组，但当前代码无法触发预期的更新逻辑。

问题根源 #

你的handleCheck函数存在状态不可变操作的问题：直接修改了原factoryQuery数组的引用，React依赖状态引用的变化来检测更新，这种修改方式不会触发组件重新渲染，导致search函数无法被调用。

修复方案 #

1. 修复复选框处理函数（handleCheck） #

修改为不可变更新逻辑，确保每次状态更新都生成新的数组引用：

const handleCheck = (e) => {
  const value = e.target.value.toLowerCase();
  setFactoryQuery(prevQuery => {
    if (e.target.checked) {
      // 返回新数组，添加选中值
      return [...prevQuery, value];
    } else {
      // 返回过滤后的新数组，移除取消选中的值
      return prevQuery.filter(item => item !== value);
    }
  });
};

2. 优化搜索结果的生成（推荐） #

使用useMemo缓存筛选结果，仅当factoryQuery或procurements变化时重新计算，提升性能：

import { useMemo } from 'react';

// 缓存筛选后的采购数据
const filteredProcurements = useMemo(() => {
  if (factoryQuery.length === 0) return procurements;
  return procurements.filter(procurement => 
    factoryQuery.includes(procurement.data.factory_name.toLowerCase())
  );
}, [factoryQuery, procurements]);

// 渲染组件时直接使用缓存结果
<ProcurementsList procurements={filteredProcurements} />

3. 保留原search函数的优化（可选） #

如果坚持使用原search函数，只需确保组件能响应factoryQuery的变化重新调用它：

const search = () => {
  if (factoryQuery.length === 0) return procurements;
  return procurements.filter(procurement => 
    factoryQuery.includes(procurement.data.factory_name.toLowerCase())
  );
};

// 渲染时直接调用，factoryQuery变化会触发组件重新渲染，进而调用search
<ProcurementsList procurements={search()} />

关键说明 #

• React状态更新必须遵循不可变原则，不能直接修改原状态对象/数组，必须返回新的引用才能触发组件更新。
• 当procurements数据量较大时，useMemo能避免每次渲染都重复执行筛选逻辑，大幅提升性能。

内容的提问来源于stack exchange，提问作者TANISHA GUPTA