React Hooks中如何向useState定义的state数组追加数据？

• React的状态更新为异步批量执行逻辑，在循环内多次调用setFilteredProducts时，每次读取的filteredProducts都是当前渲染周期的初始旧值，并非上一次状态更新后的结果，最终仅最后一次状态更新会生效，数组只会保留最后一个符合条件的元素。

推荐优先使用第一种方案，仅需一次状态更新，性能更优：

方案1：先筛选匹配元素再一次性更新 #

// 先过滤出所有符合分类要求的商品
const matchedProducts = products.filter(product => product.category === category)
// 合并到现有数组后一次性更新状态，使用函数式写法获取最新的之前状态
setFilteredProducts(prev => [...prev, ...matchedProducts])

方案2：循环内使用函数式状态更新 #

如果有逐次更新的需求，使用setState的函数式参数获取上一次的最新状态：

products.forEach((product) => {
  if (product.category === category) {
    // prev参数永远指向最新的状态值
    setFilteredProducts(prev => [...prev, product])
  }
})

内容的提问来源于stack exchange，提问作者Tim Taylor