时间戳

首页 > 解决方案 > 在 componentWillMount 中设置状态时如何解决日志记录问题

javascript - 在 componentWillMount 中设置状态时如何解决日志记录问题

问题描述

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

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

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

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

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

任何指导将不胜感激！

标签： javascriptreactjs

解决方案

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

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

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

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

推荐阅读