React Hooks中如何向数组类型state追加数据且保留原有内容？

你写的数组追加逻辑本身是正确的，通过setState的函数式更新拿到当前最新的state值、再展开拼接新内容的写法符合React的最佳实践，你当前代码的核心问题是React状态更新是异步的，调用setFilteredProducts后立刻读取filteredProducts拿到的还是更新前的旧值，会导致dispatch传递的payload数据错误。

具体修复点 #

• 移除不必要的DOM查询：直接通过event.target.checked获取复选框状态，无需调用document.getElementById查找元素
• 勾选逻辑中提前计算好更新后的数组，同步传给setState和dispatch，避免读取旧state
• 可选择性添加数组去重逻辑，避免重复勾选同一分类时添加重复商品

修正后完整代码 #

const [filteredProducts, setFilteredProducts] = useState([]);

const filteredByCategory = (event, category, products) => {
  if (event.target.checked) {
    const productsToAdd = products.filter(
      (product) => product.category === category
    );
    
    setFilteredProducts((currentFilteredProducts) => {
      // 先计算最终要更新的数组
      const newFilteredProducts = [
        ...currentFilteredProducts,
        ...productsToAdd,
      ];
      // 直接用刚计算的新值dispatch，不用读旧的state
      dispatch({
        type: "PRODUCTS_FILTERED",
        payload: newFilteredProducts,
      });
      return newFilteredProducts;
    });
  } else {
    const removedCheckedProducts = filteredProducts.filter((product) => {
      return product.category !== category;
    });
    
    setFilteredProducts(removedCheckedProducts);
    
    if (removedCheckedProducts.length >= 1) {
      dispatch({
        type: "PRODUCTS_FILTERED",
        payload: removedCheckedProducts,
      });
    } else {
      dispatch({
        type: "PRODUCTS_FILTERED",
        payload: allProducts,
      });
    }
  }
};

可选优化建议 #

如果要避免重复添加同一分类的商品，可以在拼接前加去重判断：

// 检查当前列表中是否已有对应分类的商品，没有再添加
const hasCategory = currentFilteredProducts.some(p => p.category === category);
const newFilteredProducts = hasCategory ? currentFilteredProducts : [...currentFilteredProducts, ...productsToAdd];

如果你用的是Redux这类全局状态管理工具，也可以直接把筛选逻辑放到reducer中处理，不用同时维护本地state和全局state，减少数据不一致的风险。

内容的提问来源于stack exchange，提问作者Tim Taylor