React复选框过滤功能异常：二次点击失效及多选逻辑问题求助

问题根源 #

你当前的实现有两个核心问题：

• 用单个toCheck布尔状态控制所有复选框，导致多个复选框的选中状态互相干扰，再次点击时逻辑混乱。
• 直接修改newProducts变量（newProducts = products）违反React状态更新规则，状态必须通过setNewProducts修改，直接赋值不会触发组件重新渲染。

最优解决方案 #

不需要为每个复选框单独创建布尔状态，用一个数组存储选中的分类即可，既支持多选过滤，也能独立管理每个复选框的选中状态。

修改后的完整代码 #

const App = () => {
  const [category, setCategory] = useState(["electronics","jewelery","men's clothing","women's clothing"]);
  const [products, setProducts] = useState([
    {"id":1,"title":"Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops","price":109.95,"category":"electronics", "rating":{"rate":3.9,"count":120}},
    {"id":2,"title":"Mens Casual Premium Slim Fit T-Shirts ","price":22.3, "category":"men's clothing","rating":{"rate":4.1,"count":259}},
    {"id":3,"title":"Mens Cotton Jacket","price":55.99, "category":"men's clothing","rating":{"rate":4.7,"count":500}},
    {"id":4,"title":"Womens Dress","price":15.99, "category":"women's clothing" ,"rating":{"rate":2.1,"count":430}},
    {"id":5,"title":"John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet","price":695, "category":"jewelery","rating":{"rate":4.6,"count":400}}
  ])

  // 存储选中的分类，初始为空
  const [selectedCategories, setSelectedCategories] = useState([]);

  // 实时计算过滤后的产品，用useMemo避免不必要的重计算
  const filteredProducts = useMemo(() => {
    if (selectedCategories.length === 0) {
      return products;
    }
    return products.filter(prod => selectedCategories.includes(prod.category));
  }, [products, selectedCategories]);

  // 处理复选框点击事件
  const handleCategoryToggle = (category) => {
    setSelectedCategories(prev => {
      if (prev.includes(category)) {
        // 如果已选中，移除该分类
        return prev.filter(cat => cat !== category);
      } else {
        // 如果未选中，添加该分类
        return [...prev, category];
      }
    });
  };

  return <div>
    <div className='d-flex justify-content-evenly'>
        {
            category.map((elm, index) => {
                return <div className="form-check ms-2" key={index}>
                    <input 
                      className="form-check-input" 
                      type="checkbox" 
                      value={elm} 
                      id={`flexCheck-${index}`} // 每个复选框id要唯一，避免label关联错误
                      checked={selectedCategories.includes(elm)} // 控制复选框选中状态
                      onChange={() => handleCategoryToggle(elm)}
                    />
                    <label className="form-check-label" htmlFor={`flexCheck-${index}`}>
                        {elm}
                    </label>
                </div>
            })
        }
    </div>
    <div className='d-flex flex-wrap'>
      {
        filteredProducts.map((prod) => {
          return  <div className='card m-3' style={{ width: "400px" }} key={prod.id}>
            <div className='card-body'>
                <p className='card-text'>Id: {prod.id}</p>
                <h3 className='card-title'>Title: {prod.title}</h3>
                <p className='card-text'>Price: {prod.price}</p>
                <p className='card-text'>Category: {prod.category}</p>
                <p className='card-text'>Rating: {prod.rating.rate}</p>
            </div>
          </div>
        })
      }
    </div>
   </div>
}

关键修改点说明 #

• 状态管理：用selectedCategories数组替代原来的toCheck和newProducts，集中管理所有选中的分类。
• 实时过滤：用useMemo缓存过滤结果，只有当products或selectedCategories变化时才重新计算，提升性能。
• 复选框状态同步：给每个复选框设置checked属性，关联selectedCategories数组，确保选中状态和数据一致。
• 唯一ID：每个复选框的id设置为唯一值（flexCheck-${index}），避免多个label关联到同一个复选框的问题。

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