Javascript 在项目列表中搜索

我正在使用React material ui搜索栏搜索列表中的项目。我已经创建了搜索栏组件，它将列表组件中的项目数组作为属性

问题：我希望在搜索项目时仅显示父列表中的项目。我遵循了下面的教程，但没有一个适合我

以下是组件的代码：

列表组件：

<List
  component="nav"
  aria-labelledby="nested-list-subheader"
  subheader={
    <ListSubheader component="div" id="nested-list-subheader">
      <SearchBar items={items} /> //Calling SeacrhBar Component
    </ListSubheader>
  }
>
  {items.map((item, index, list) => (
    <Fragment key={item.id}>
      <ListItem
        button
        key={item.id}
        onClick={() => changeSubList(0)}
        onDoubleClick={() =>
            changeSubList(item)
        }
      >
        <ListItemText primary={item.name}/>
        <ListItemSecondaryAction>
        </ListItemSecondaryAction>
      </ListItem>
      <Collapse in={openItemID === item.id} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItem button className={classes.nested}>
          </ListItem>
          <item itemId={item.id}/>
        </List>
      </Collapse>
    {index < list.length - 1 ? <Divider/> : null}
  </Fragment>
  ))}
</List>

      const SearchBar = ({items}) => {
        const [searchTerm, setSearchTerm] = useState("");
        const [searchResults, setSearchResults] = useState([]);
         const handleChange = event => {
            setSearchTerm(event.target.value);
        };
        useEffect(() => {
            const results = items.filter(deivce =>
                deivce.name.toLowerCase().includes(searchTerm)
            );
            setSearchResults(results);
        }, [searchTerm]);
    
        return (
            <div>
                <input
                    type="text"
                    placeholder="Search"
                    value={searchTerm}
                    onChange={handleChange}
                />
                <ul>
                    {searchResults.map(item => (
                        <li key={item.id}>{items}</li>
                    ))}
                </ul>
            </div>
        );
    }
export default SearchBar;

---

提前谢谢

谢谢大家，我已经解决了这个问题。在代码的最后一次更新之后，只需在列表组件中添加searchcomponent，如下代码所示

    return (
    <List component="nav"
          aria-labelledby="nested-list-subheader"
          subheader={
              <ListSubheader component="div" id="nested-list-subheader">
              </ListSubheader>
          }>
        <SearchBar items={items}/>
    </List>
);

返回(
);

能否显示

项的数据结构

@Alloylo，钩子在哪里？你在哪里定义了钩子？它看起来是什么样子？抱歉@hotcakedev让你分心了。我是新手，不知道在搜索栏组件或列表组件中的何处使用钩子。@Alloyo，您必须传递使用

useState

将关键字设置为

searchBar

组件的事件处理程序。@Alloyo，您能制作代码笔吗？

    return (
    <List component="nav"
          aria-labelledby="nested-list-subheader"
          subheader={
              <ListSubheader component="div" id="nested-list-subheader">
              </ListSubheader>
          }>
        <SearchBar items={items}/>
    </List>
);