@gabejonson
Верстальщик с намеком на Front

React запрос на сервер?

Добрый день, сейчас пытаюсь познать React, и столкнулся с такой проблемой.
Оправляю запрос на сервер, для получения массива:
const peoples = 'https://randomuser.me/api/?results=50';

componentDidMount() {
    fetch(peoples)
    .then(res => {
      if(res.status !== 200) {
        console.log(res.status);

        return;
      }
      res.json().then(function(res) {
        this.setState({data: res});
      });
    })
  }

И соответственно результат запихиваю в компонент:
<Header items={data} />

И вот что получается...
Сперва приходит null, а уже потом сам массив...

Предположение такое, что он (запрос) просто не успевает приняться перед render'ом компонента...
Но как это перебороть?
Интересно как именно стандартными методами это сделать, без библиотек (jQuery или axios)

setInterval или setTimeout это как - то не вариант ибо выглядит костыльно... Да и работать будет не очень хорошо (я так думаю)
  • Вопрос задан
  • 5895 просмотров
Решения вопроса 1
gadfi
@gadfi
https://gamega.org
Если хотите решить проблему в лоб то просто проверяйте перед рендером данные, это в любом случае не повредит, или задайте начальное значение для data, но React это view слой, слать запросы из view не самая лучшая идея
Посмотрите в сторону flux архитектуры (я сам использую redux но общее название ... )
Шлите запросы из action, в redusere меняйте store, а компонент сам уже отрисует все что придет
Звучит не первый взгляд дико и кода чуть больше но он сильно чище и проще в поддержке
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы