reactjs - React hooks 如何搜索数组子数组

Question

我有一个这样的json文件

{"id": 1,
   "categoryName": "Download",
   "children": [
      {  "id": 3,
         "name": "name",
         "text": "text"
      }
   ]
}

我有搜索输入。我可以像这样搜索 onChange categoryname 但我想搜索 child 的名字。我怎样才能做到这一点？

    const [searchTerm, setSearchTerm] = useState("");
    const [searchResults, setSearchResults] = useState([]);
    const handleChange = event => {
        setSearchTerm(event.target.value);
    };

    useEffect(() => {
        const results = data.filter(item =>
            item.categoryName.toLowerCase().includes(searchTerm)
        );
        setSearchResults(results);

    }, [searchTerm]);

Answer 1

目前您按类别名称过滤:

   item.categoryName.toLowerCase().includes(searchTerm)

您需要过滤 不按类别名称 (这里区分大小写)
并专注于 children.name 像这样:

   item.children[0].name.toLowerCase().includes(searchTerm)

但是这个解决方案只有在 child 时才有效阵列 有一个 对象 .
为了包括每个对象 - 您需要迭代这个数组。

let results = [];

for (let i = 0; i < data.children.length; i++) {
   oneChild = data.filter(item =>
       item.children[i].name.toLowerCase().includes(searchTerm)
   )
   results.push(oneChild)
}

在沙箱中进行实验后 - ii 得到了这个函数，它过滤元素的子元素，它们是 2 个嵌套级别

const results = data.map((element) => {
  return {
    ...element,
    subElements: element.children.filter((subElement) =>
      subElement.name.includes(searchTerm)
    )
  };
});

最后该解决方案应该过滤:

  useEffect(() => {
    let filteredArray = data
      .filter((element) =>
        element.children.some((subElement) =>
          subElement.name.includes(searchTerm)
        )
      )
      .map((element) => {
        let newElt = Object.assign({}, element); // copies element
        newElt.subElements = newElt.children.filter((subElement) =>
          subElement.name.includes(searchTerm)
        );
        return newElt;
      });

    setSearchResults(filteredArray);
  }, [searchTerm]);