如何显示与筛选器匹配的json文件中的数据？

Question

我正在创建一个多步骤的React表单，我想在表单中创建一个页面(Filters.jsx)，它返回与我的过滤器( beaf，鸡肉，蔬菜)匹配的所有菜单名(包含在data.json中)，但是我不知道如何做到这一点。

import React from "react";
export default function Filter() {
  return (
    <div className="flex flex-col">
      <div className=" w-full mx-2 flex-1">
        <div className="font-bold h-6 mt-3 text-gray-600  leading-8 uppercase ">
          {" "}
          Norms
        </div>

        <tbody className="bg-white my-2 p-1 flex borer border-gray-200 rounded text-gray-500">
          <tr>
            <td className="font-bold h-8 mt-5 leading-8 uppercase ">
              <td>
                <input type="checkbox" value="beaf" className="w-8 h-3" /> beaf
              </td>
              <td>
                <input type="checkbox" value="chicken" className="w-8 h-3" />
                chicken
              </td>
              <td>
                <input type="checkbox" value="vegetables" className="w-8 h-3" />
                vegetables
              </td>
            </td>
          </tr>
        </tbody>
      </div>
    </div>
  );
}

下面是我的沙箱的链接(浏览/菜单/表单查看表单)：https://codesandbox.io/s/unruffled-river-ktoic8?

我试过的是：

export default function Filters() {

    //Filters events
    const ref = [
        { name: "beaf" },
        { name: "chicken" },
        { name: "vegetables" }
    ]

    const [norms, setNorms] = useState([]);
    useEffect(() => {
        setNorms(ref);
    }, []);


    const handleChange = (e) => {
        const { name, checked } = e.target;
        let tempR = norms.map((r) =>
            r.name === name ? { ...r, isChecked: checked } : r
        );
        setNorms(tempR);
    }


    return (
        <div>
            <form className="form w-100">
                {
                    norms.map((e, index) => (
                        <div className="form-check" key={index}>
                            <input
                                type="checkbox"
                                className="form-check-input"
                                name={e.name}
                                checked={e?.isChecked || false}
                                onChange={handleChange}
                            />
                            <label className="form-check-label ms-2">{e.name}</label>
                        </div>
                    ))
                }
            </form >
        </div>
    )

Answer 1

我建议使用对象或Map来保存筛选值，其中过滤器名称是键，选中的值是值。

const [filters, setFilters] = React.useState({});

创建一个处理程序，根据名称设置特定输入的检查值。

const changeHandler = (e) => {
  const { name, checked } = e.target;
  setFilters((filters) => ({
    ...filters,
    [name]: checked
  }));
};

呈现输入并从状态设置checked支柱。

{["beef", "chicken", "vegetables"].map((name) => (
  <td key={name}>
    <label>
      <input
        type="checkbox"
        checked={filters[name]}
        onChange={changeHandler}
        name={name}
        className="w-8 h-3"
      />
      {name}
    </label>
  </td>
))}

然后过滤/映射数据，全部内联。

import data from "../../data.json";

...

{data
  .filter((item) => {
    // get array of enabled filter keys
    const filterEntries = Object.entries(filters)
      .filter(([, value]) => Boolean(value))
      .map(([key]) => key);

    // some filter enabled
    if (filterEntries.length) {
      // check proteins
      if (filters.beef || filters.chicken) {
        return item.dishes.some((dish) =>
          filterEntries.includes(dish.meat)
        );
      }

      // check vegetables
      if (filters.vegetables) {
        return item.dishes.some((dish) => !!dish.vegetables);
      }
    }

    // no filter enabled, return all elements
    return true;
  })
  .map((item) => (
    <tr key={item.id}>
      .... map data item properties here ...
    </tr>
  ))}

​

​