javascript - 如何在 React 钩子(Hook)中附加到状态数组？

Question

我有一个状态设置为

const [filteredProducts, setFilteredProducts] = useState([]);

我希望能够附加到该状态的末尾。我正在尝试

products.forEach((product) => {
        if (product.category === category) {
          setFilteredProducts([...filteredProducts, product]);
        }
      });

它正确地循环遍历产品数组。我什至可以在 setFilteredProducts 之后记录产品，它会记录我想要的正确产品。我用 onClick 调用它。

Answer 1

找到您要添加的所有产品:

const productsToAdd = products.filter(product => product.category === category)

然后附加它们

setFilteredProducts((currentFilteredProducts) => ([...currentFilteredProducts, ...productsToAdd]));

您的示例的问题是 filteredProducts 可能在第一次迭代后变得陈旧。 setFilteredProducts 将不同步运行，并且 filteredProducts 保持原始值，直到重新渲染发生。