Question

我使用以下函数来判断用户是否经过身份验证：

  async componentWillMount() {
    this.setState({ busy: true });

    const authorisationProvider = this.props.authorisationProvider;

    const currentSession = await authorisationProvider.getSession();

    this.props.getUserAttributes();

    this.setState({ isAuthenticated: currentSession && currentSession.isValid(), busy: false });
  }

然后我在isAuthetnicated中使用render：

  render() {
    if (this.state.busy) {
      return <LoadingOverlay busy={true} />;
    }

    return this.state.isAuthenticated ? this.props.children : <Redirect to={this.props.redirectTo} />;
  }

这似乎是一种不好的方法，并且在反应16.3中不推荐使用componentWillMount。

有人能提出一种方法可以更好地重构吗？

Answer 1

使用componentDidMount！您可以在构造函数this.state = { busy: true }中设置状态，以便第一次点击render()函数时，您将显示加载叠加层。

另一种方法是，在构造函数上，检查用户是否已经过身份验证（给定您正在接收的初始道具）并有条件地初始化busy状态。像这样：

constructor(props) {
  super(props);

  const busy = !props.isAuthenticated;
  this.state = {
    busy: busy,
  };
}

反应中的async componentWillMount 16.3

1 个答案: