React使用async/await设置状态

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()。我该如何优化这个问题？

- L. Norman

---

在组件挂载之前预加载数据（渲染null或占位符）？ - Egor Stambakio

Answer 1

如果必须异步加载一些数据，那么重新渲染可能难以避免。

您可以保留一个额外的状态变量loading，并在渲染方法中返回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;
    }

    // ...
  }
}

- Tholle

---

是的，这看起来是最好的方法。谢谢！ - L. Norman

我最终做的是将componentDidMount变成一个异步函数，然后在render中，如果(nav && user)为真，则返回我的组件，否则返回null。效果很好。 - L. Norman