ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Как запрашивать данные в ReactJS с fetch
9 месяцев назад·2 мин. на чтение
Несколько простых шагов для запроса данных с сервера в ReactJS с помощью fetch API.
1. Определите значение по умолчанию
Вызовfetch()
является асинхронным методом, поэтому нам нужно использовать значение по умолчанию до тех пор, пока REST API не вернет ответ. Определение неправильных значений по умолчанию вызовет ошибки JavaScript еще до вызова fetch()
, поэтому убедитесь, что значение по умолчанию указано в React JS коде.
В нашем случае, так как мы ожидаем массив из вызова API, значением по умолчанию будет пустой массив.
const defaultValue = []
2. Объявите состояние React для хранения данных из API
Нам нужно объявить состояние React для хранения списка пользователей, возвращенного из ответа на вызов API. Обновление состояния с помощьюsetUsers()
гарантирует, что экран обновится после получения списка пользователей из вызова REST API.
// Состояние для хранения списка пользователей const [users, setUsers] = useState(defaultValue);
3. JavaScript функции для получения данных из API и сохранения ответа
Нам нужно объявить JS-функцию для получения данных с внешнего URL-адреса следующим образом:- Мы получаем данные из URL-адреса
https://jsonplaceholder.typicode.com/todos/
с помощью JavaScriptfetch()
API. - Добавьте функцию обратного вызова в
then()
для преобразования ответа в формат JSON. - Состояние пользователя React обновляется списком пользователей из ответа API.
// Функция для сохранения данных const getApiData = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/todos/" ).then((response) => response.json()); // Обновим состояние setUsers(response); };
4. Добавьте useEffect
для получения API при загрузке страницы
После того, как мы определили функцию для получения данных API, она должна срабатывать при загрузке страницы. getApiData()
, добавленный в React useEffect()
с пустым массивом зависимостей, который гарантирует, что код срабатывает один раз при загрузке страницы.
useEffect(() => { getApiData(); }, []);
5. Генерация JSX-кода с состоянием React
Наконец, нам нужно отобразить сведения о каждом пользователе. Следовательно, мы сгенерируем JSX-код для каждого пользователя с помощьюArray.map()
, а функция обратного вызова вернет <div></div>
с user.id
и user.title
.
<div className="app"> {users.map((user) => ( <div className="item-container"> Id:{user.id} <div className="title">Title:{user.title}</div> </div> ))} </div>
6. Вызов API через Axios
Основной недостаток вызоваfetch()
заключается в том, что нам пришлось вручную конвертировать данные из API в формат JSON. Существует npm пакет axios, который сам управляет преобразованием JSON. После установки npm install axios
в package.json
, можно реализовать метод getAPIData()
через axios следующим образом:
import axios from "axios"; const getApiData = async () => { const response = await axios( "https://jsonplaceholder.typicode.com/todos/" ); setUsers(response); };
Полный код решения
import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function App() { const [users, setUsers] = useState([]); const getApiData = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/todos/" ).then((response) => response.json()); setUsers(response); }; useEffect(() => { getApiData(); }, []); return ( <div className="app"> {users.map((user) => ( <div className="item-container"> Id:{user.id} <div className="title">Title:{user.title}</div> </div> ))} </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
Чтобы изучить React с нуля и понять все тонкости работы с React пройдите наш авторский курс от создателей канала DevMagazine - Быстрый старт в React.
Инструменты разработчика React
10 месяцев назад·1 мин. на чтение
Используйте инструменты разработчика React для инспектирования компонентов React, редактирования пропсов и состояния, а также выявления проблем с производительностью.
Содержание туториала по React
Используйте инструменты разработчика React для инспектирования компонентов React, редактирования пропсов и состояния, а также выявления проблем с производительностью.
Расширение для браузера
Самый простой способ отладки веб-сайтов, созданных с помощью React — установить расширение для браузера React Developer Tools. Он доступен для нескольких популярных браузеров: Теперь, если вы посетите веб-сайт, созданный с помощью React, вы увидите панели Components и Profiler.Safari и другие браузеры
Для других браузеров (например, Safari) установите npm-пакетreact-devtools
:
Затем откройте инструменты разработчика из терминала:# Yarn yarn global add react-devtools # Npm npm install -g react-devtools
Затем подключите свой веб-сайт, добавив следующий тегreact-devtools
<script>
в начало <head>
вашего веб-сайта:
Перезагрузите свой веб-сайт в браузере, чтобы просмотреть его в инструментах разработчика.<html> <head> <script src="http://localhost:8097"></script> </head> </html>
Мобильный (React Native)
Инструменты разработчика React также можно использовать для проверки приложений, созданных с помощью React Native. Самый простой способ использовать React Developer Tools — установить его глобально:Затем откройте инструменты разработчика из терминала.# Yarn yarn global add react-devtools # Npm npm install -g react-devtools
Он должен подключаться к любому локальному приложению React Native, которое запущено. Попробуйте перезагрузить приложение, если инструменты разработчика не подключаются через несколько секунд.react-devtools