Javascript ReactJS。如何异步设置状态？

我有以下代码。我正在尝试创建一个异步上传多个图像的组件。这只是我的代码的一个简单版本，可以看出问题所在

const Item = ({ item, onAsyncUpdate }) => {
  
  React.useEffect(() => {
    const timeoutID = setTimeout(() => {
      onAsyncUpdate({id: item.id, value: "Updated list item"})
    }, Math.random() * 1000);
    return () => clearTimeout(timeoutID)
  }, [])

  return (
    <li>{item.id} - {item.value}</li>
  )
}

const App = () => {
  const [ items, setItems ] = React.useState([
    {id: 1, value: "List Item"},
    {id: 2, value: "List Item"},
    {id: 3, value: "List Item"},
    {id: 4, value: "List Item"},
    {id: 5, value: "List Item"},
  ])
  
  return (
    <div>
      <h1>Items list</h1>
      <ul>
        {items.map(item =>
          <Item
            item={item}
            onAsyncUpdate={updated => {
              setItems(items.map(el => updated.id == el.id ? updated : el))
            }}
          />
        )}
      </ul>
    </div>
  )
}
      
ReactDOM.render(<App />, document.getElementById('app'))

但我得到的是：

Items list
1 - List Item
2 - Updated list item
3 - List Item
4 - List Item
5 - List Item

我做错了什么？有什么办法解决这个问题吗？

---

下面是一个代码笔示例：

每个

项目

在安装应用程序后同时运行自己的

onAsyncUpdate

，但该功能：

setItems(items.map(el => updated.id == el.id ? updated : el))

，在其结尾中，包含应用程序初始呈现中存在的

项。有状态的
项
未得到更新；传递给
项的回调将始终引用初始项，而不是运行
onAsyncUpdate
后的项

改为使用回调窗体设置状态：

setItems(items => items.map(el => updated.id == el.id ? updated : el))

setItems(items => items.map(el => updated.id == el.id ? updated : el))