Рендеринг, кажется, запускается до componentDidMount (используется async/await)

у моей проблемы есть обходной путь, но меня интересует основная проблема.

В моем компоненте 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.info(this.state.displayData)},когда я загружаю свою страницу, моя консоль всегда будет печатать пустые строки примерно 2 раза (поскольку сначала это было мое состояние displayData), а затем начинает регистрировать полученные данные.. Так не должно быть, я использовал async/await. Мой быстрый обходной путь прост для моего приложения, я пытаюсь отобразить список, который будет использовать .map, я инициировал displayData для пустого массива, чтобы даже при отсутствии данных .map не вызывал никаких ошибок.

Вот мой код того, как я получил данные: В componentDidMount моего компонента "AuthorProfile":

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

Это вызовет избыточное действие 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, для отправки, вот вызов post /api/users/getroadmapbyuser:

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

Это вернет поле в моей базе данных, теперь я собираюсь обновить свое состояние редукции с помощью .then(res => dispatch.....,) отправка выглядит следующим образом:

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

Я, наконец, буду использовать эти данные дорожных карт other_author_created и установлю свои displayData равными им.