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

vectoria
  • 3
新手上路,请多包涵

标题描述的可能有点绕,具体是这样的:想要实现一个图片上传的组件,选好图片后先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用于上传中的处理等等,因为总觉得不是最佳实践,这个功能有没有更简单的实现方式?感谢】

回复
阅读 411
1 个回答
✓ 已被采纳
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏