Question

我有一个功能，如果未登录用户，则呈现 LoginPage ；如果已登录，则呈现 IndexPage ，但是它不呈现任何内容，我尝试提醒用户.displayName和它工作。查看我的代码。

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

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

为什么不工作？

Answer 1

您错过了return函数中的renderPage，但是在render中执行异步请求并不是一种好的反应方式。

您应该做的是将用户移至状态，然后在componentDidMount上从异步代码中提取用户，然后在渲染器中使用状态道具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>;
}

Answer 2

render方法中的函数是异步函数，您得到的是不确定的。

您应该存储用户状态。做类似的事情，

class YourComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: null
        };
    }

    componentDidMount() {
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
              this.setState({
                  user
              });
            }
        });
    }

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

为什么我的函数不返回组件？反应

2 个答案: