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

Question

I have an array created with useState hook

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

But updating this array with previous state corrupts itemsUpdated counter as map seems to run twice.

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

While updating directly also corrupts updated value as setUpdated is async

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

It is a working solution, but how it is working correctly is beyond me. What is the correct way to update the previous state?

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

EDIT: All the answers stating that map will run for each item of array are incorrect. map will run only once and return a same size array. It's the map's callback function that runs for each item of array.

Answer 1

The problem is that map is like a foreach/for loop so it will run callbacks for all items. The callback passed into the map will run two times as array has 2 items, so your value is updating twice.

Answer 2

The map callback function will be called once for every oldArray item.

For example, if the oldArray is ['a', 'b'] , the setUpdated will be called once for each item in the array.

A better approach would be to call setUpdated on an useEffect hook:

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

This way, everytime items state changes, the setUpdate function will be called. You can also map items inside the callback whenever you want.