登录时 React 不响应 observable

Question

我正在使用 Mobx 来管理我的 React webapp 和 firebase 的用户登录状态以进行授权。

我似乎无法弄清楚为什么我的 webapp 不响应用户实际登录。它总是停留在默认值已注销。

这是我的代码：

const App: React.FC<Props> = ({ basename }) => {

  var isSignedIn = true
  


  onAuthStateChanged(auth, (user) => {
    if (user) {
      // User is signed in, see docs for a list of available properties
      // https://firebase.google.com/docs/reference/js/firebase.User
      console.log("IS SIGNED IN");
      isSignedIn = false;

    } else {
      // User is signed out
      isSignedIn = true;
      console.log("IS NOT SIGNED IN");
    }
  });

  return (
    <BrowserRouter basename={basename}>
      <ThemeProvider>
        <Switch>
          <Route path="/error" component={ErrorsPage} />
          <Route path="/logout" component={Logout} />
          {
            !isSignedIn?
              <Route>
                <PublicRoutes />
              </Route>
                :
              <>
                <MasterLayout>
                  <PrivateRoutes />
                </MasterLayout>
              </>
          }
        </Switch>
      </ThemeProvider>
    </BrowserRouter>
  );
};

export { App };

当我运行它时，它正确地将我发送到登录页面，并且在控制台中我看到它写着“未登录”。登录后，我在控制台中看到它更新为“已登录”，但页面上没有任何反应？我无法访问常规网站，它一直将我重定向到登录页面，表明它无法将我识别为已登录用户。

但是，如果我将 isSignedIn 的默认值设置为 true，它会正确地将我定向到主页。

我做错了什么？

Answer 1

而不是像

那样直接赋值

isSignedIn = true;

在 React 中你应该使用 useState 钩子。声明变量（它是 setter 函数）

const [isSignedIn, setIsSignedIn] = useState(false);

然后稍后更新值

setIsSignedIn(true);

否则，每当组件 re-renders 时都会重置该值。 https://reactjs.org/docs/hooks-state.html

登录时 React 不响应 observable

React not responding to observable when logging in

reactjs

firebase

firebase-authentication

mobx