Во многих приложениях извлечение данных выполняется путем запуска программного или вручную или вручную. Эта статья приводит пример того, как это сделать. Используемый пример из предыдущей статьи Как получить данные с помощью React Hooks , ниже приведен код:
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const res = await fetch(
'https://hn.algolia.com/api/v1/search?query=react',
);
const json = await res.json();
setData(json.hits);
};
fetchData();
}, []);
return (
-
{data.map(item => (
- {item.title} ))}
Получить данные программно с помощью использования
Приведенный выше пример извлекает данные, когда компонент устанавливает. Мы всегда получаем тот же самый запрос «React». Давайте добавим элемент ввода, чтобы получить другие истории. Поэтому мы должны добавить поле ввода, состояние для поискового запроса из поля ввода и обновления FetchData Чтобы использовать этот динамический поисковый запрос.
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
const [query, setQuery] = useState('react');
useEffect(() => {
const fetchData = async () => {
const res = await fetch(
`https://hn.algolia.com/api/v1/search?query={query}`,
);
const json = await res.json();
setData(json.hits);
};
fetchData();
}, []);
return (
setQuery(event.target.value)}
/>
{data.map(item => (
-
{item.title}
))}
);
}
export default App;
Последняя вещь. Попробуйте обновить код и запустить его. Вы что -то заметили? Когда вы вводите поле ввода, поиск не запускает fetchData () Анкет Причина в том, что крючок использования не зависит от чего -либо. Вторым аргументом использования является пустой массив, поэтому он запускается только один раз, когда компонент формирует. Эффект должен работать, когда поисковый запрос меняется. Следовательно, мы должны предоставить запрос как второй аргумент.
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
const [query, setQuery] = useState('react');
useEffect(() => {
const fetchData = async () => {
const res = await fetch(
`https://hn.algolia.com/api/v1/search?query={query}`,
);
const json = await res.json();
setData(json.hits);
};
fetchData();
}, [query]);
return (
setQuery(event.target.value)}
/>
{data.map(item => (
-
{item.title}
))}
);
}
export default App;
Теперь при каждом изменении данных поля ввода извлекаются. Что если мы хотим добавить кнопку поиска, чтобы не привлекать к удару каждый ключ?
Получить данные вручную с помощью использования
Чтобы избежать извлечения данных при каждом изменении состояния запроса, мы можем просто добавить кнопку в триггер fetchData () Анкет Давай попробуем. Добавляем кнопку с Onclick Метод для установки нового состояния Поиск , который запускает крюк с использованием.
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
const [query, setQuery] = useState('react');
const [search, setSearch] = useState('react');
useEffect(() => {
const fetchData = async () => {
const res = await fetch(
`https://hn.algolia.com/api/v1/search?query={query}`,
);
const json = await res.json();
setData(json.hits);
};
fetchData();
}, [search]);
return (
setQuery(event.target.value)}
/>
{data.map(item => (
-
{item.title}
))}
);
}
export default App;
Ну, теперь это работает. В некотором роде. У нас есть два штата для управления поисковым запросом. Мы должны реформировать код для удаления дублирования. Вместо того, чтобы устанавливать дополнительное состояние поиска, которое совпадает с состоянием запроса, мы можем просто предоставить URL с запросом на Fetch Анкет
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
const [query, setQuery] = useState('react');
const [url, setUrl] = useState(
'https://hn.algolia.com/api/v1/search?query=react',
);
useEffect(() => {
const fetchData = async () => {
const res = await fetch(url);
const json = await res.json();
setData(json.hits);
};
fetchData();
}, [search]);
return (
setQuery(event.target.value)}
/>
{data.map(item => (
-
{item.title}
))}
);
}
export default App;
Это если для неявных программных данных, извлеченных с помощью Использоватьэффект Анкет Вы можете решить, какое состояние зависит от эффекта. После того, как вы установите это состояние, использование снова будет работать. В этом случае, если состояние URL изменяется, эффект снова работает для получения данных из API.
TL; DR
💰: Начните свое облачное путешествие с 100 долларов в бесплатных кредитах с DigitaloCean!
Спасибо за чтение, и если у вас есть Вопросы , используйте Комментарий функция или Отправьте мне сообщение @mariokandut Анкет
Если вы хотите узнать больше о Реагировать , посмотрите на это React Tutorials Анкет
Ссылки (и большое спасибо):
Reactjs , Робин Виеруч , Дэйв Седдия
Оригинал: “https://dev.to/mariokandut/how-to-trigger-data-fetching-with-react-hooks-21k0”