React Hooks怎么用一个方法连续setState并且获取useState的值？

Question

标题描述的可能有点绕，具体是这样的：想要实现一个图片上传的组件，选好图片后先push一个待上传的图进mediaList，然后上传完成后根据id匹配那张图然后更新mediaList。mediaList是用于显示到HTML里面的。

const [mediaList,setMediaList] = useState([]);

const selectImage = (id,img) =>{
  let list = [...mediaList];
  list.push({id,img,status:'待上传'})
  setMediaList(list)
  handleUpload(id,img)
}

const handleUpload = (id,img) =>{
  // 上传图片中操作
  uploadStuff(img).then((res)=>{
    let list = [...mediaList]; // 这里拿到的mediaList是空的
    let item = list.find((listItem)=>listItem.id===id);
    item.status='上传完成';
    setMediaList(list)
  })
}

问题是这里拿到的mediaList是空的。

1、于是用useEffect，监听mediaList改变后才去handleUpload，在handleUpload里筛选状态为'待上传'的图片然后再上传。可是这时候如果一些图片没有上传完，用户又选了图片，又会触发handleUpload，会导致部分图片上传两次。

2、延续1：在handleUpload里先把‘待上传’的图setMediaList为‘正在上传’，这样就算用户在上传过程选了新图片，也不会把正在上传的图拿去再上传一遍了，可能这样相当于setMediaList->handleUpload->setMediaList，控制台会报错

 Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render

我说的可能有点乱，因为我react hooks刚接触有点菜。我想实现的就是【用react hooks封装一个多图上传组件，有上传中和上传完成等状态就行】。。。在Vue和Angular和小程序都做得得心应手，但是react hooks不知道为什么脑子阻塞了。。。也没找到案例，可能太基础了吧。有没有大神帮帮忙

【PS:上面的问题我没有尝试很多太绕的方法，比如延时或者在useEffect里加入更多判断，甚至多加一个state用于上传中的处理等等，因为总觉得不是最佳实践，这个功能有没有更简单的实现方式？感谢】

Answer 1

其实官方文档已经给出了例子，具体请查看react useState

我这里也提供一个例子以供调试使用https://codesandbox.io/s/repetitive-setstate-o2fr8?file=/src/App.js