為什么我的 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)