如何在反应中更新使用useState钩子创建的数组

Question

我有一个用 useState 钩子创建的数组

const [items,setItems] = useState(['a','b','c'])
const [itemsUpdated, setItemsUpdated] = useState(0)

但是用以前的 state 更新这个数组会损坏 itemsUpdated 计数器，因为 map 似乎运行了两次。

setItems(oldArray => {
  console.log("I should be printed once but being printed twice")
  return oldArray.map(item => {
    setItemsUpdated(oldValue => oldValue + 1 )
    return item
  })}
)
console.log(itemsUpdated)
// expected itemsUpdated = 3
// but result is itemsUpdated = 6

虽然直接更新也会破坏更新的值，因为 setUpdated 是异步的

setItems(Items.map(item => {
    setItemsUpdated(itemsUpdated+1)
    return item
}))
console.log(itemsUpdated)
// updated = 1 

这是一个可行的解决方案，但它如何正常工作超出了我的范围。 更新之前的 state 的正确方法是什么？

setItems(Items.map(item => {
    setItemsUpdated(oldValue => oldValue + 1 )
    return item
}))
console.log(itemsUpdated)
// updated = 3

编辑：所有说明 map 将为每个数组项运行的答案都是不正确的。 map将只运行一次并返回相同大小的数组。 这是地图的回调 function 为数组的每个项目运行。

Answer 1

问题是 map 就像一个 foreach/for 循环，因此它将为所有项目运行回调。 传递给 map 的回调将运行两次，因为数组有 2 个项目，因此您的值会更新两次。

Answer 2

map 回调 function 将为每个 oldArray 项目调用一次。

例如，如果 oldArray 是['a', 'b'] ，则 setUpdated 将为数组中的每个项目调用一次。

更好的方法是在 useEffect 挂钩上调用 setUpdated：

useEffect(() => {
  setUpdated(oldValue => oldValue + 1 )
}, [items])

这样，每次 state 项目发生变化时，都会调用 setUpdate function。 您还可以随时在回调中使用 map 项目。