Как лучше делать асинхронные запросы в контейнерной компоненте React, чтобы в презентационную пришли обновленные пропсы?

Question

[Zhanna_K]

Добрый вечер! Столкнулась с такой проблемой.

• Нужно отобразить список проектов, которые я храню в кластере MongoAtlas.
  
• Через axios я делаю запрос на сервер, подгружаю данные в стор. Затем пытаюсь через connect() прокинуть эти данные в компоненту.
  
• Все работает, но данные приходят уже после того, как вызывается метод render(). Поэтому компонента не отрисовывается и выбрасывает ошибку.
  Как это починить?
  

Пыталась сделать запрос в componentDidMount(), но этот метод не срабатывает, тк компонента не отрисовалась.
Делалю запрос через componentWillMount(), но прочитала, что так делать нельзя... и пропсы все равно приходят пустые...

Answer 1

[Zhanna_K]

В итоге получилось решить проблему с помощью getDerivedStateFromProps
Сравниваю стейт с пришедшими пропсами и обновляю стейт. Затем данные стейта уже передаю как пропсы детям

static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.projects !== nextProps.projects) {
    }
    return {
      projects: nextProps.projects,
    };
  }

Если вы знаете другое элегантное решение, напиши пожалуйста комментарий.

P.S. 10 минут спустя я нашла глупую ошибку в коде, так что друзья, всё как и положено хорошо работает без того, что я написала выше.
Просто асинхронный запрос в componentDidMount() и все пропсы автоматически обновляются.
Такие простые вещи должны работать без всяких изощрений.
Так что будьте внимательны, а не как я:)

Answer 2

[Владислав Лысков]

Все работает, но данные приходят уже после того, как вызывается метод render(). Поэтому компонента не отрисовывается и выбрасывает ошибку.
Как это починить?

async await

Comments

[Zhanna_K]

Компонента не монтируется, так как ее дочерние компоненты не монтируются из-за ошибки. Ошибка из-за отсутствия нужных значений в пропсах, которые я не знаю как получить. Замкнутый цикл.

asyns/await я уже использую, но компонента даже не достигает монтирования, а значит запрос не идет.

async componentDidMount() {
    await this.props.getProjectsThunk(this.props.userId);
}

Возможно я неправильно понимаю логику. Как сделать так, чтобы компонента, у которой куча детей, использующих её пропсы при отрисовке без проблем монтировалась?

[Владислав Лысков]

Zhanna_K, не знаю, как в реакте, ещё не работал с ним, но в vue есть mounted и created, вот для таких случаев я использую created

[Zhanna_K]

Владислав Лысков, ок спасибо! Получилось решить проблему, решение я прикрепила к вопросу

[Владислав Лысков]

Zhanna_K,

Делалю запрос через componentWillMount(), но прочитала, что так делать нельзя... и пропсы все равно приходят пустые..

Так получилось или нет?

[Zhanna_K]

Владислав Лысков, да, через componentDidMount(). Только в нём разрешено делать асинхронные запросы)

[Владислав Лысков]

Zhanna_K, ничё непонятно в этом вашем реакте, надо будет поизучать