为什么我的 useState 不会重新打印包含新元素的数组？

Question

为什么我的 useState 属性不起作用？ 在过滤器搜索栏中，我试图根据输入重新打印 Array 的元素，但我无法正确重新打印，

const clickSearchIcon = (query) => {
    let filteredItems = [];
    console.log('ITEAM ALL:', itemsAll); //works --> 9
    setItems(itemsAll); //DONT work, --> 1st time: 9 , second time: 0; both times must be 9
    console.log('items:', items);
    //filtrar items que concuerdan con el query
    items.map((item) => {
      if (item.title === query) return filteredItems.push(item);
    });
    //repintar item filtrado con el query
    setItems(filteredItems); //does work
  };

这是完整的文件，以防您需要更多上下文

这是浏览器和 console.logs

Answer 1

itemsAll从未更改，因此您无需在clickSearchIcon function 中更新它。 要过滤项目，您可以使用filter而不是map 。

const clickSearchIcon = (query) => {
  const filteredItems = items.filter((item) => item.title === query);
  setItems(filteredItems);
};

Answer 2

allItems从未更改过。 setItems没有看到它已被更改。 因为allItems是一个数组，虽然你改变了它的项目，但是 object 本身（认为它是一个指针）并没有改变。

只需使用一个新变量，复制allItems ，然后在新变量上使用setItems 。

let newItems = [...allItems]
// modify newItems
setItems(newItems)