javascript - 如何修复在 componentWillMount 中设置状态时的日志记录问题

Question

我遇到了状态问题，因为我没有 100% 正确使用 componentDidMount 和 componentWillMount。

我已经设置了构造函数和 super 属性，并且我正在使用 getCurrentUser() 方法获取用户对象，并使用新对象设置用户状态。

componentWillMount() {
  const current_user = getCurrentUser().then(user => {
    this.setState({
      user: user
    });
    console.log(user);
  });
}

componentDidMount() {
  console.log(this.state.user);
}

它在 componentWillMount 中正确记录用户，但在 componentDidMount 中记录一个空对象。

任何指导将不胜感激!

Answer 1

干脆不要使用 componentWillMount，在 componentDidMount 中执行。

实际上，componentDidMount 是调用获取数据的最佳位置，原因有两个:

使用 DidMount 可以清楚地表明，在初始渲染之后才会加载数据。这会提醒您正确设置初始状态，这样您就不会出现导致错误的未定义状态。

如果您需要在服务器上渲染应用程序(SSR/同构/其他流行语)，则 componentWillMount 实际上会被调用两次 - 一次在服务器上，另一次在客户端上 - 这可能不是您想要的。将数据加载代码放在componentDidMount中将确保只从客户端获取数据。