Javascript 我想根据给定的搜索输入过滤数组

我正在制作一个杂货店网站，我想根据用户提供的搜索输入过滤杂货店的商品。必须在屏幕上显示已过滤的杂货项目。我返回了以下代码，但当我在搜索后在控制台上记录

filterDisplay

的值时，它显示了0个条目的对象

function Search() {
  const [word, setWord] = useState("");
  const [filterDisplay, setFilterDisplay] = useState({
    key: "",
    name: "",
    quantity: "",
    price: ""
  });

  function handleChange(event) {
    let oldList = grocery.map((groceryToLower) => {
      return {
        key: groceryToLower.key,
        name: groceryToLower.name.toLowerCase(),
        quantity: groceryToLower.quantity,
        price: groceryToLower.price
      };
    });

    if (event !== "") {
      let newList = [];
      setWord(event);
      newList = oldList.filter((name) =>
        name.name.includes(word)
      );

      setFilterDisplay(newList);
    } else {
      setFilterDisplay(grocery);
    }
  }

  console.log(filterDisplay);

return <input name="search" onChange={handleChange} placeholder="Search" />

函数搜索（）{
const[word，setWord]=useState（“”）；
常量[filterDisplay，setFilterDisplay]=useState({
关键字：“，
姓名：“，
数量：“，
价格：“
});
函数句柄更改（事件）{
let oldList=grovery.map（（groceryToLower）=>{
返回{
关键字：groceryToLower.key，
名称：groceryToLower.name.toLowerCase（），
数量：GroceryTower.quantity，
价格：groceryToLower.price
};
});
如果（事件！==“”）{
让newList=[]；
设定字（事件）；
newList=oldList.filter（（名称）=>
name.name.includes（word）
);
设置过滤器显示（新列表）；
}否则{
设置过滤器显示（杂货店）；
}
}
console.log（filterDisplay）；
返回

您正在使用

输入事件更新
word
，这是错误的，您应该使用实际单词
event.target.value
。我对此做了一些工作，您可以尝试此代码。已创建


函数搜索（）{
常量[filterDisplay，setFilterDisplay]=useState（[]）；
函数句柄更改（事件）{
const word=event.target.value
如果（！术语）{
setFilterDisplay（杂货店）；//假设'grovery'是项目列表
}否则{
setFilterDisplay（groffy.filter（g=>g.name.toLowerCase（）.includes（word）））
}
console.log（filterDisplay）；
}
返回
}
您的代码片段中的
是什么
。
word
状态不会为过滤器中的检查更新。此外，在功能组件的函数体中发出副作用（如日志记录）可能会产生奇怪的结果，请尝试登录依赖于
过滤器显示的
useEffect
钩子。是否可以提供一个更完整的示例，包括一些测试数据和示例结果？

function Search() {
  const [filterDisplay, setFilterDisplay] = useState([]);

  function handleChange(event) {
    const word = event.target.value
    if (!term) {
      setFilterDisplay(grocery); // assuming `grocery` is list of items
    } else {
      setFilterDisplay(grocery.filter(g => g.name.toLowerCase().includes(word)))
    }
    console.log(filterDisplay);
  }
  return <input name="search" onChange={handleChange} placeholder="Search" />
}