javascript - render 似乎在 componentDidMount 之前触发(使用 async/await)

Question

我的问题确实有解决方法，但我对根本问题感兴趣。

在我的组件 AuthorProfile 中，我使用 async/await 来获取数据，然后使用获取的数据设置我的状态，并使用控制台登录 render() 来查看发生了什么，这是我的组件，没有渲染功能:

  constructor(props) {
    super(props);
    this.state = { displayData: [] };
  }
  async componentDidMount() {
    await this.props.getRoadmapByUser({
      user_id: this.props.location.pathname.slice(9)
    });
    this.setState({
      displayData: this.props.auth.other_author_created_roadmaps
    });

  }

在渲染中，我有 return(blah blah blah... {console.log(this.state.displayData)}，当我加载页面时，我的控制台将始终打印空白行大约 2 次(因为这是我的 displayData 状态)，然后开始记录获取的数据。情况不应该是这样，我使用了 async/await。我的快速解决方法对于我的应用程序来说很简单，我试图显示一个将使用 .map 的列表，我将 displayData 初始化为一个空数组，这样即使没有数据 .map 也不会调用任何错误。

这是我如何获取数据的代码:在我的组件“AuthorProfile”的 componentDidMount 中:

 async componentDidMount() {
    await this.props.getRoadmapByUser({
      user_id: this.props.location.pathname.slice(9)
    });
  }

这将触发 redux 操作 getRoadmapByUser ，如下所示:

 export const getRoadmapByUser = id => dispatch => {
   return axios
    .post("/api/users/getroadmapbyuser", id)
    .then(res => dispatch({ type: GET_ROADMAPS_BY_USER, payload: res.data }));
};

这会进行 api 调用，然后使用从 api 调用检索到的数据进行调度，这是/api/users/getroadmapbyuser 后的调用:

router.post("/getroadmapbyuser", (req, res) => {
  User.findOne({ _id: req.body.user_id }).then(user =>
    res.json(user.createdRoadmap)
  );
});

这将返回我的数据库中的一个字段，现在我将使用 .then(res =>dispatch.....,) 更新我的 redux 状态，调度如下所示:

 case GET_ROADMAPS_BY_USER:
  return {
    ...state,
    other_author_created_roadmaps: action.payload
  };

我最终将使用这个 other_author_created 路线图数据并将我的 displayData 设置为等于它。

Answer 1

这是预期(正确)的行为，您可以引用此生命周期图 here

首先运行构造函数，然后运行渲染函数，然后运行ComponentDidMount。

根据react文档componentDidMount :

“你可以在componentDidMount()中立即调用setState()。它会触发额外的渲染，但它会在浏览器更新屏幕之前发生。这保证了即使在这种情况下render()将被调用两次...”