Question

所以我要在我的构造函数中设置状态：

constructor(props: IProps) {
    super(props);
    const nav = NavService.getNav();
    const user = AuthService.getProfile();

    this.state = {
        activeNav: 0,
        nav: nav ? nav : [],
        showDropdown: false,
        showNavDropdown: false,
        user: user ? user : [],
    };
}

但是，我注意到一些异步问题，因此我想使getNav（）和getProfile（）异步并等待它们。显然，我无法在构造函数中执行此操作，因为构造函数无法异步，因此无法使用await。现在，我知道可以将其放入async componentDidMount()中，但这会导致双render()。我该如何优化呢？

Answer 1

我认为，如果必须异步加载一些数据，将很难避免重新渲染。

您可以保留一个额外的状态变量loading，然后仅在render方法中返回null，直到数据加载完毕。

示例

class App extends React.Component {
  state = {
    activeNav: 0,
    nav: [],
    showDropdown: false,
    showNavDropdown: false,
    user: [],
    loading: true
  };

  componentDidMount() {
    Promise.all(NavService.getNav(), AuthService.getProfile())
      .then(([nav, user]) => {
        this.setState({ nav, user, loading: false });
      })
      .catch(error => {
        this.setState({ loading: false });
      });
  }

  render() {
    const {
      activeNav,
      nav,
      showDropdown,
      showNavDropdown,
      user,
      loading
    } = this.state;

    if (loading) {
      return null;
    }

    // ...
  }
}

使用async / await反应设置状态

1 个答案: