卸载时反应组件未运行清理功能。使用 Firestore答案

【问题标题】：react component not running the cleanup function on unmount. Working with firestore卸载时反应组件未运行清理功能。使用 Firestore
【发布时间】：2021-04-06 08:01:34
【问题描述】：

我有一个如下所示的 react 组件 useEffect 钩子。我正在与 Firestore 合作。当组件卸载时，我试图从 firestore 中的数组中删除一个值。但是，该值不会被删除。我尝试在清理函数中独立运行 firestore 查询，以查看该查询是否是问题所在，但它独立运行良好。当它在清理功能中时，它只是没有被执行。我认为问题是当组件卸载时（例如当我关闭窗口时），我在 useEffect 挂钩末尾的清理函数没有被调用。有谁知道我可能做错了什么？提前感谢您的帮助

   useEffect(() => {
    
    ....... 

    return () => {
        fire.firestore().collection("ActiveUsers").doc(utilvar.teacherID).get().then((snapshot) => {
            var docref = snapshot.ref;
            return docref.update({
                active_users : fieldValue.arrayRemove({id: currentUser.uid, name: displayName})
            })                     
        }) 
    };
    

}, []);

【问题讨论】：

您的查询是否依赖于任何以空值或空值启动的状态变量？如果是这样，这可能是问题所在，因为清理函数是在定义时使用传递给它的值调用的，即在挂载时。

标签： javascript reactjs

【解决方案1】：

根据我的观察。 utilvar.teacherID 在您的组件安装时可能还没有准备好。因此，您可能希望将其添加到可靠数组中。因此，您的 useEffect 应如下所示：

useEffect(() => {
    
    ....... 

    return () => {
        fire.firestore().collection("ActiveUsers").doc(utilvar.teacherID).get().then((snapshot) => {
if(snapshot.exist){
return snapshot.ref.update({
                active_users : fieldValue.arrayRemove({id: currentUser.uid, name: displayName})
            }).catch(err=>err);                    
        }) 
    };
    

}, [utilvar.teacherID]);

我添加了捕获作为返回的承诺。无论在何处使用，都必须妥善处理。

【讨论】：