Question

我的问题确实有解决方法，但是我对潜在问题感兴趣。

在我的组件AuthorProfile中，我正在使用async / await来获取数据，然后使用所获取的数据来设置我的状态，并使用控制台登录render（）来查看发生了什么，这是我的组件没有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)}，当我加载页面时，控制台将始终打印两次空白行（因为起初是我的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。

根据反应文档componentDidMount：

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

Answer 2

让redux在componentDidMount中调度一个动作也将像setState一样并触发额外的渲染。我想问一下，您到底想做什么？ COS，我根本没有发现这种奇怪或奇怪的行为

渲染似乎在componentDidMount（已使用异步/等待）之前被触发

2 个答案: