如何解决围绕路线导航时,useEffect函数内的Firestore异步调用导致错误
当我导航到另一条路线并复出时,用于从Firestore Storage提取图像的异步功能会导致错误。这是Items组件中的useEffect
方法
const Item = (props) => {
const [itemImage,setItemImage] = useState('')
const [isEditing,setIsEditing] = useState('')
const [isDeleting,setIsDeleting] = useState(false)
useEffect(()=>{
setItemImage(placeholder)
if(props.itemImage){
firestoreService.getImageUrl(props.itemImage,'itemImage')
.then(url => {
setItemImage(url)
})
.catch(err => {
console.log("error")
})
}
},[])
名为Item的组件仅在/items
路线中呈现。当我回到/
路线并回到/items
路线时,出现以下错误。我该如何解决?
解决方法
当您尝试在未安装的组件上设置setState时,会出现此错误消息。
在您的示例中
firestoreService.getImageUrl(props.itemImage,'itemImage')
.then(url => {
setItemImage(url)
})
.catch(err => {
console.log("error")
})
您正在调用的函数将需要一些时间才能返回。
同时,如果您返回到另一个组件/路由,则当前的组件将被卸载,但是当您从firebase获得返回时,它将尝试更新状态
setItemImage(url)
这就是为什么出现此错误的原因。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。