Javascript 在react中使用Firebase和上下文API进行身份验证会给我一个警告。这是正确的方法吗？

我正在尝试使用firebase和上下文API在React中的web应用程序上设置身份验证。 我使用的是上下文API，因为只要我了解，我就无法将jwt令牌保存在本地存储中，以免受到XSS攻击，目前我不想使用Redux

在我的App.js中，我有：

const {setUserInfo} = useContext(userInfoContext);
useEffect(() => {
  auth.onAuthStateChanged(user => {
    if (user) {
      setUserInfo({jwtToken: user.za});
    } else {
      setUserInfo({jwtToken: null});
    }
    console.log(user);
  });
}, [setUserInfo]);

每次我登录或使用firebase.auth注销时，都会触发“auth.onAuthStateChanged”方法

---

编译器告诉我，为了消除警告，我应该使用“[setUserInfo]”而不是“[]”。但是，按照他所说的，setUserInfo方法执行了两次。有一种更好的方法可以在不发出警告的情况下获得结果？

您的问题是在重新计算效果时没有清理效果。只要将

setUserInfo

添加到依赖项数组，只要其值发生更改，就会执行该效果。这意味着，如果

setUserInfo

的值发生变化，您可能会注册许多

auth.onAuthStateChanged

---

auth.onAuthStateChanged

返回一个取消订阅函数。您只需在effect中返回此函数，这将使react在再次执行挂钩时执行unsubscribe函数，并防止您拥有多个活动侦听器。我建议您阅读更多有关此主题的内容。

我回答了一个类似的问题-您可以将

useffect

带到

ContextProvider

本身中。