Zhanna_K
@Zhanna_K
in progress

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

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


Пыталась сделать запрос в componentDidMount(), но этот метод не срабатывает, тк компонента не отрисовалась.
Делалю запрос через componentWillMount(), но прочитала, что так делать нельзя... и пропсы все равно приходят пустые...
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
Zhanna_K
@Zhanna_K Автор вопроса
in progress
В итоге получилось решить проблему с помощью getDerivedStateFromProps
Сравниваю стейт с пришедшими пропсами и обновляю стейт. Затем данные стейта уже передаю как пропсы детям
static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.projects !== nextProps.projects) {
    }
    return {
      projects: nextProps.projects,
    };
  }


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

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

async await
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы