Fetch в React.js или как работать с AJAX в реакте

Йоу-йоу! Я тут занялся изучением React’а. И понадобилось мне по ajax запросить данные для своего приложения. Ну и чтобы не мучиться долго с освоением работы с данной технологией в react.js я пошёл в документацию во по этой ссылке. По идее там всё просто, т.к. в примере не использовался обычный fetch, без какого-нибудь axios. Но, как оказалось там есть ошибка. Там так много скобок, что можно стать шепелявым глядя на них). Конечно же ничего не получилось у меня из документации и пришлось разбираться самому.  Сейчас я вам расскажу, что и как там.

Среда в которой работал

Иногда случаются проблемы на начале работы с React из-за настройки npm-мов всяких, хочется просто начать работать.

Вот мой package.json:

Он был создан в октябре 2018 года с реактом версии 16.5.2

Собственно о fetch в react.js

Есть у нас компонент с конструктором. Там содержится состояние. В состояние есть ошибки, загружено или нет и данные. Для данных я изначально я установил пустой массив, isLoaded false и ошибки null.

Во время componentDidMount я сделал fetch на свой адрес. Ну и в зависимости от ответа устанавливается есть данные или нет и есть ошибка или нет.

В рендере (render, внутри return) я проверял загружено или нет и выводил либо таблицу (у меня в компоненте нужно было) либо выводил ошибки.

Либо вы можете сделать проверку загружены ли данные или нет и отдавать разный return как в примере, который есть в документации реакта.

Полезные ссылки

Использование Fetch

P.S.

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