useEffect() 函数内部的 Firestore 异步调用导致在路由周围导航时出错

Question

当我导航到另一条路线并返回时，用于从 Firestore 存储获取图像的异步函数导致错误。这是 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 路线时，出现以下错误。我该如何解决？

Answer 1

当您尝试在未安装的组件上设置状态时，您会收到此错误消息。

这里是你的例子

firestoreService.getImageUrl(props.itemImage, 'itemImage')
            .then(url => {
                setItemImage(url)
            })
            .catch(err => {
                console.log("error")
            })

您正在调用一个需要一些时间才能完成的函数 return。同时，如果您返回到另一个 component/route，您当前的组件将被卸载，但是当您从 firebase 获得 return 时，它会尝试更新状态 setItemImage(url)

这就是您收到此错误的原因。

useEffect() 函数内部的 Firestore 异步调用导致在路由周围导航时出错

Firestore async call inside useEffect() function causes error when navigating around routes

setstate

firebase

reactjs

google-cloud-firestore

use-effect