Question

我正在获取一组对象并且我想应用多个过滤器。遵循场景：打开弹出窗口并选择“猫”应在按下“应用”后显示所有猫，关闭弹出窗口 -> 返回过滤器 -> 选中“狗” -> 按“猫”类型再次选择并过滤按名称“foxy”-> 显示所有名称为“foxy”的猫。似乎从开始获取的数据没有保存在内存中。是的，因为我过滤的时候，是通过过滤器设置的，但是不知道怎么重新过滤。

你能指导我并解释我怎么做吗？谢谢！

https://codesandbox.io/s/keep-data-after-i-apply-first-filter-f0cdj

Answer 1

您可以在 Array.filter 中使用条件：

  const handleFilteredData = () => {
    setData(creaturesData.filter(c=>filters.type.includes(c.type) || filters.name.includes(c.name)))
  };

但是您必须将类型名称而不是 ID 传递给过滤器：

  const handleTypeCheck = (e) => {
    const id = e.target.name;

    console.log(typeof id);
    const updatedData = data.map((item) => {
      return item.type === id ? { ...item, checked: !item.checked } : item;
    });
    setData(updatedData);
  };

Reactjs 钩子。应用过滤器后如何保留数据

1 个答案: