React数组新增元素过滤问题：原数组修改与新元素无法识别

你的问题核心在于把原始产品数据和过滤后的数据存在了同一个state里，过滤操作直接覆盖了原始数据，导致后续没法重新从全量数据过滤；同时Filters组件内部维护了一份产品数据的副本，同步逻辑有问题，新增元素无法及时同步。下面是具体的修复方案：

1. 重构App组件：拆分数据与过滤状态 #

把原始全量数据、过滤条件、过滤结果分开管理，彻底避免原始数据被覆盖：

import produkty from "./common/consts/produkty";
import { useState, useMemo } from "react";

function App() {
  const [productsToBuy, setProductsToBuy] = useState([]);
  // 存所有原始产品（初始数据+新增的）
  const [originalProducts, setOriginalProducts] = useState(produkty);
  // 存过滤条件，而非直接存过滤后的结果
  const [filterParams, setFilterParams] = useState({
    searchPhrase: "",
    searchCategory: "",
    searchOnlyGroceries: false
  });

  // 用useMemo实时计算过滤结果，依赖原始数据和过滤条件
  const filteredProducts = useMemo(() => {
    return originalProducts.filter(product => {
      // 搜索词匹配（忽略大小写）
      const matchesPhrase = product.nazwa.toLowerCase().includes(filterParams.searchPhrase.toLowerCase());
      // 分类匹配（空值时不过滤）
      const matchesCategory = !filterParams.searchCategory || product.kategoria === filterParams.searchCategory;
      // 食品匹配（false时不过滤）
      const matchesGroceries = !filterParams.searchOnlyGroceries || product.produktSpozywczy;
      // 所有条件同时满足才保留
      return matchesPhrase && matchesCategory && matchesGroceries;
    });
  }, [originalProducts, filterParams]);

  // 接收新增产品的回调
  const handleAddProduct = (newProduct) => {
    setOriginalProducts(prev => [...prev, newProduct]);
  };

  // 接收过滤条件变化的回调
  const handleFilterChange = (newParams) => {
    setFilterParams(prev => ({ ...prev, ...newParams }));
  };

  return (
    <div className={styles.appWrapper}>
      <AddProducts sendNewProductToParent={handleAddProduct} />
      <ProductsFilters
        originalProducts={originalProducts}
        filterParams={filterParams}
        onFilterChange={handleFilterChange}
      />
      <div className={styles.columnsWrapper}>
        <ProductsList
          newProductsList={filteredProducts}
          sendAddedProductsToParent={setProductsToBuy}
        />
        <ShopingList productsToBuy={productsToBuy} />
      </div>
    </div>
  );
}

2. 改造ProductsFilters组件：只管理过滤条件 #

改成函数式组件，去掉内部的产品数据state，直接使用父组件传入的原始数据，解决新增元素无法识别的问题：

function ProductsFilters({ originalProducts, filterParams, onFilterChange }) {
  const { searchPhrase, searchCategory, searchOnlyGroceries } = filterParams;

  // 直接从原始数据提取唯一分类
  const getUniqueCategories = () => {
    const categories = originalProducts.map(p => p.kategoria);
    return [...new Set(categories)];
  };

  return (
    <div className={styles.Wrapper}>
      <p>Products Filters</p>
      <br />
      <input
        value={searchPhrase}
        onChange={(e) => onFilterChange({ searchPhrase: e.target.value })}
        placeholder="搜索产品名称"
      />
      <br />
      <p>按分类筛选</p>
      <select 
        value={searchCategory}
        onChange={(e) => onFilterChange({ searchCategory: e.target.value })}
      >
        <option value="">所有分类</option>
        {getUniqueCategories().map((category) => (
          <option key={category} value={category}>
            {category}
          </option>
        ))}
      </select>
      <br />
      <p>仅显示食品</p>
      <input
        type="checkbox"
        checked={searchOnlyGroceries}
        onChange={(e) => onFilterChange({ searchOnlyGroceries: e.target.checked })}
      />
    </div>
  );
}

export default ProductsFilters;

3. 调整AddProducts组件：简化新增逻辑 #

直接传递单个产品对象给父组件，同时清空表单提升体验：

import { useState } from "react";
import styles from "../../common/styles/Headers.module.scss";

function AddProducts({ sendNewProductToParent }) {
  const [newProduct, setNewProduct] = useState({
    productName: "",
    category: "",
    groceries: false,
  });

  function handleChange(event) {
    const { name, type, value, checked } = event.target;
    setNewProduct(prev => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value
    }));
  }

  function handleAddNewProduct() {
    sendNewProductToParent({
      nazwa: newProduct.productName,
      kategoria: newProduct.category,
      produktSpozywczy: newProduct.groceries,
    });
    // 清空表单
    setNewProduct({ productName: "", category: "", groceries: false });
  }

  return (
    <div className={styles.Wrapper}>
      <p>Add products</p>
      <input
        name="productName"
        value={newProduct.productName}
        onChange={handleChange}
        placeholder="产品名称"
      />
      <input
        name="category"
        value={newProduct.category}
        onChange={handleChange}
        placeholder="分类"
      />
      <label>
        <input
          name="groceries"
          type="checkbox"
          checked={newProduct.groceries}
          onChange={handleChange}
        />
        是否为食品
      </label>
      <button onClick={handleAddNewProduct}>Add new product</button>
    </div>
  );
}

export default AddProducts;

关键修复点说明 #

1. 分离原始数据与过滤结果：originalProducts始终保存全量产品，过滤操作只修改条件，永远不会丢失原始数据，解决无法重新过滤的问题。
2. Filters组件无状态化：不再维护产品数据副本，直接使用父组件传入的原始数据，新增产品后能立即同步。
3. 过滤逻辑叠加生效：修复了原逻辑中后续过滤覆盖前置结果的问题，现在所有条件同时生效。
4. 避免无限循环：移除了原componentDidUpdate中易触发重复更新的state同步逻辑，改用props直接传递数据。

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