javascript - 为什么我的函数不返回组件？ react

Question

我有一个函数，如果用户未登录，则呈现 LoginPage ；如果已登录，则呈现 IndexPage ，但它不会呈现任何内容，我尝试提醒用户.displayName 和它工作。请参阅我的代码。

renderPage = () => {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        return <IndexPage />;
      } else {
        return <LoginPage />;
      }
    });
  };

  render() {
    return <div>{this.renderPage()}</div>;
  }

为什么不工作？

Answer 1

你错过了renderPage函数中的return，但是在render中执行异步请求在react中并不是一个好方法。

您应该做的是将用户移至状态，然后在 componentDidMount 上从异步代码中获取用户，并在渲染内部使用 state 属性 user.

所以你的代码应该是这样的:

constructor() {
  this.state = { user: null };
}

componentDidMount() {
  firebase.auth().onAuthStateChanged(user => {
    user ? this.setState({ user }) : this.setState({ user: null });
  });
}

render() {
  const content = this.state.user ? <IndexPage /> : <LoginPage />;
  return <div>{content}</div>;
}