reactjs - 如何在函数调用中包装 React 状态变量？

Question

我有一些异步更新的状态，我想将其包装在函数调用中（以模块化代码）。

具体来说，我有一个isLoggedIn状态变量，我想通过 React 组件内的函数调用来检索它。到目前为止，我有：

firebase.js

function userLoggedIn() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  firebase.auth().onAuthStateChanged((user) => {
    if (user == null) {
      console.log("No user logged in.");
    } else {
      console.log(`User ${user.uid} authenticated!`);
      setIsLoggedIn(true);
    }
  });

  return isLoggedIn;
}

export default userLoggedIn;

我有一个单独的组件，我想从中获取此isLoggedIn状态：

AuthenticatedRoute.js

const AuthenticatedRoute = ({ component: Component, ...rest }) => {
  const isLoggedin = userLoggedIn();

  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: props.location } }}
          />
        )
      }
    />
  );
};

它在页面加载时工作正常，但如果我注销（并且user = null）isLoggedIn不会更改为 False。

如果我在内部内联函数体，这一切都很好AuthenticatedRoute：一般来说，如何实现这一点？

标签： reactjs