React多食材复选框筛选功能失效问题求助

你现在的核心问题是把多选的食材拼成逗号分隔的字符串塞到searchField里，导致筛选时会检查食谱食材是否包含整个字符串（比如"盐,油"），自然匹配不到任何结果。同时原代码的筛选逻辑把搜索框和复选框的判断混在一起，逻辑混乱。

下面是修复后的代码和关键修改说明：

import React, { useState } from "react";
import DisplayFoodItems from "./DisplayFoodItems";
import { ingredients } from "../data/Ingredients";

function Search({ details }) {
  const [searchField, setSearchField] = useState("");
  const [checked, setChecked] = useState([]);

  const filtered = details.filter((entry) => {
    // 搜索框匹配：名称或分类包含搜索文本，无搜索内容时默认匹配
    const matchesSearch = searchField === "" || 
      entry.name.toLowerCase().includes(searchField.toLowerCase()) ||
      entry.catagory.toLowerCase().includes(searchField.toLowerCase());

    // 食材筛选：无选中食材时默认匹配，有选中时只要包含任一食材就算匹配
    const matchesIngredients = checked.length === 0 || 
      entry.ingredients.some(ing => 
        checked.some(selected => 
          ing.toLowerCase().includes(selected.toLowerCase())
        )
      );

    // 同时满足搜索和食材的匹配条件
    return matchesSearch && matchesIngredients;
  });

  const handleToggle = (ingredient) => () => {
    setChecked(prev => {
      if (prev.includes(ingredient)) {
        // 取消勾选，移除该食材
        return prev.filter(item => item !== ingredient);
      } else {
        // 勾选，添加该食材
        return [...prev, ingredient];
      }
    });
  };

  return (
    <>
      <div>
        <input 
          id="search"
          className="form-control"
          type="text"
          placeholder="Search by recipe name or catagory"
          onChange={(e) => setSearchField(e.target.value)}
          value={searchField}
        />
      </div>
      <div>
        {ingredients.map((ingredient, index) => (
          <label key={index} className="form-check-label">
            <input
              onChange={handleToggle(ingredient.name)}
              type="checkbox"
              className="mr-2"
              checked={checked.includes(ingredient.name)}
            />
            {ingredient.name}
          </label>
        ))}
        <hr />
      </div>
      <div className="flex">
        <DisplayFoodItems foodList={filtered} />
      </div>
    </>
  );
}

export default Search;

关键修改点： #

1. 拆分状态职责：不再用searchField存储选中食材，让它只负责搜索框输入，checked数组单独管理选中食材
2. 重构筛选逻辑：用matchesSearch和matchesIngredients分开处理两种筛选条件，逻辑更清晰；用Array.some()实现"包含任一选中食材"的或逻辑
3. 修复复选框状态：给复选框绑定checked属性，确保视图和状态一致；用函数式更新checked数组，避免直接修改原数组
4. 规范React属性：把class="flex"改成className="flex"，符合React的属性命名规范

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