當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React hook 中的数据获取

發布時間：2023/12/2 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 React hook 中的数据获取小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

相關說明：

對于hook相關詞不翻譯，感覺翻譯后怪怪的。

effect hook 效果鉤子，用于執行一些副作用例如獲取數據。

state hook 狀態鉤子。

使用----------- 和 ----------- 標出代碼需要關注的地方。

渣翻譯如下：

在這個指南中，我想給你展示使用state和effect hook在React hooks中如何獲取數據。我們將使用著名的 Hacker News API從高科技世界中獲取受歡迎的文章。你也可以為獲取數據實現自定義獲取數據的hook，這個hook可以在你的應用中任何地方重用，也可以作為一個獨立的node包發布到npm上。

如果關于react的新特性你什么都不知道，可以查看這篇文章introduction to React Hooks。如果你想查看怎么通過React Hooks獲取數據例子的完整項目，查看這個GitHub 倉庫。

如果你只是想在使用React Hook獲取數據前有一個準備：npm install use-data-api 并且參照這個文檔。如果你采用了不要忘了小星星哦:-)。

**注：**在未來，React沒有計劃為獲取數據添加專門的Hooks。反而，Suspense將會負責這個功能。下面的預演是學習react中關于state和effect hooks一個比較好的方法。

使用React Hooks獲取數據

如果你不熟悉在React中獲取數據，查看我的在react中獲取大量的數據這篇文章。這篇文章會引導你使用React Comopnent 類獲取數據，怎么樣可以讓獲取數據的邏輯通過 Render Prop Components 和 Higher-Order Components重用，并且怎么處理重用加載出錯和加載中的狀態。在這篇文章中，我想給你展示以上這些通過React Hooks在函數式組件中的做法。

import React, { useState } from 'react';function App() {const [data, setData] = useState({ hits: [] });return (<ul>{data.hits.map(item => (<li key={item.objectID}><a href={item.url}>{item.title}</a></li>))}</ul>); }export default App

這個App組件展示了項目列表（hits 是 Hacker News 的文章）。這個state和跟新state的函數來自于狀態鉤子useState的調用，它的責任是管理本地我們將要為App組件獲取的數據數據的狀態，初始狀態的數據是一個對象中的空列表。還沒有人為這個數據設置任何狀態。

我們將使用axios去獲取數據，但是是使用其他獲取數據的庫還是使用瀏覽器原生的fetch API由你決定。如果你還沒有安裝axios，你可以在命令行輸入npm install axios。然后實現你自己的獲取數據的effect hook。

// ------------------------------------------------- import React, { useState, useEffect } from 'react'; import axios from 'axios'; // -------------------------------------------------function App() {const [data, setData] = useState({ hits: [] });// -------------------------------------------------useEffect(async () => {const result = await axios('http://hn.algolia.com/api/v1/search?query=redux',);setData(result.data);});// -------------------------------------------------return (<ul>{data.hits.map(item => (<li key={item.objectID}><a href={item.url}>{item.title}</a></li>))}</ul>); }export default App;

名為useEffect的effect hook被用于使用axios從接口獲取數據，并且通過狀態鉤子的更新函數設置數據到組件的本地狀態中。promise 通過 async/await中被 resolve。

然而，當你運行你的應用的的時候，你應該會陷入一個令人討厭的循環。effect hook會在組件掛載的時候運行但是也會在組件跟新的時候運行。因為我們在每次獲取數據之后設置狀態，然后組件跟新然后effect hook再次運行。組件將會一次又一次的獲取數據。這是一個需要避免的問題。我們只希望在組件掛載的時候獲取數據。

這就是為什么你需要提供一個空數組作為effect hook的第二個參數的原因，是為了阻止在組件更新的時候激活它，只在組件掛載的時候激活它。

import React, { useState, useEffect } from 'react'; import axios from 'axios';function App() {const [data, setData] = useState({ hits: [] });useEffect(async () => {const result = await axios('http://hn.algolia.com/api/v1/search?query=redux',);setData(result.data);// -------------------------------------------------}, []);// -------------------------------------------------return (<ul>{data.hits.map(item => (<li key={item.objectID}><a href={item.url}>{item.title}</a></li>))}</ul>); }export default App;

第二個參數被用于定義鉤子依賴的所有變量（分配到這個數組中）。如果有一個變量改變，鉤子會再次運行。如果數組中沒有變量，這個鉤子在組件更新的時候就不會運行，因為它沒有監聽任何變量。

還有最后一個問題。在代碼中，我們使用async/await從第三方接口獲取數據。根據文檔表述每個使用async注釋的函數都會返回一個隱含的promise對象：async函數聲明定義一個異步函數，返回一個異步函數對象。*An asynchronous function is a function which operates asynchronously via the event loop, *異步函數是一個操作通過事件循環操作異步的函數，使用隱式的Promise作為結果返回”。However, an effect hook should return nothing or a clean up function.然而，一個effect hook不應該返回值或者返回一個清除函數。（這是個啥，return nothing）這就是為什么在你的開發者日志里面能看見下面的警告： 07:41:22.910 index.js:1452 Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect.。這就是為什么不允許在useEffect直接使用異步函數的原因。讓我們來修復它，通過異步函數取代effect hook。

import React, { useState, useEffect } from 'react'; import axios from 'axios';function App() {const [data, setData] = useState({ hits: [] });useEffect(() => {// -------------------------------------------------const fetchData = async () => {const result = await axios('http://hn.algolia.com/api/v1/search?query=redux',);setData(result.data);};fetchData();// -------------------------------------------------}, []);return (<ul>{data.hits.map(item => (<li key={item.objectID}><a href={item.url}>{item.title}</a></li>))}</ul>); }export default App;

簡而言之這就是在React hooks中獲取數據。但是如果你對錯誤處理，加載狀態，怎么從表單觸發數據獲取，怎么實現一個重用的數據獲取鉤子感興趣，請繼續閱讀。

如何以編程的方式/手動觸發鉤子

很好，我們將會在組件掛載的時候獲取一次數據。但是怎么使用輸入的字段去告訴接口我們感興趣的話題呢？“Redux“作為默認的查詢。但是哪些話題是關于"React"的呢？讓我們實現一個輸入框去讓人能夠獲取Redux以外的其他信息。因此為輸入框引入一個新的狀態。

import React, { Fragment, useState, useEffect } from 'react'; import axios from 'axios';function App() {const [data, setData] = useState({ hits: [] });// -------------------------------------------------const [query, setQuery] = useState('redux');// -------------------------------------------------useEffect(() => {const fetchData = async () => {const result = await axios('http://hn.algolia.com/api/v1/search?query=redux',);setData(result.data);};fetchData();}, []);return (<Fragment>{/* ------------------------------------------------- */}<inputtype="text"value={query}onChange={event => setQuery(event.target.value)}/>{/* ------------------------------------------------- */}<ul>{data.hits.map(item => (<li key={item.objectID}><a href={item.url}>{item.title}</a></li>))}</ul></Fragment>); }export default App;

目前，每個狀態都是獨立的，但是現在你想結合他們只獲取通過輸入框輸入的查詢字段指定文章。通過下面的改變，組件應該在掛載的時候通過查詢字段獲取一次所有文章。

...function App() {const [data, setData] = useState({ hits: [] });const [query, setQuery] = useState('redux');useEffect(() => {const fetchData = async () => {const result = await axios(// -------------------------------------------------`http://hn.algolia.com/api/v1/search?query=${query}`,// -------------------------------------------------);setData(result.data);};fetchData();}, []);return (...); }export default App;

有一塊被遺漏了：當你在輸入框中輸入內容的時候，在組件掛在之后effect hook不會獲取其他數據。這是因為你用一個空數組作為effect hook函數的第二個參數。這個副作用就沒有依賴的變量，所以它只在組掛載的時候觸發。然而，現在effect hook應該依賴query。一旦query改變，就應該再次請求數據。

...function App() {const [data, setData] = useState({ hits: [] });const [query, setQuery] = useState('redux');useEffect(() => {const fetchData = async () => {const result = await axios(`http://hn.algolia.com/api/v1/search?query=${query}`,);setData(result.data);};fetchData();// -------------------------------------------------}, [query]);// -------------------------------------------------return (...); }export default App;

在你改變輸入框中的值的時候應該獲取一次數據。但是它帶來了另一個問題：你在輸入框中輸入每一個字符都會觸發并執行effect hook，然后執行獲取其他數據。提供一個按鈕去觸發請求，手動觸發鉤子怎么樣？

現在，讓effect hook依賴search狀態而不是根據輸入的每個內容波動的query狀態，用戶點擊一次按鈕，新的search狀態就會被設置并且應該手動觸發一次effect hook。

...function App() {const [data, setData] = useState({ hits: [] });const [query, setQuery] = useState('redux');// -------------------------------------------------const [search, setSearch] = useState('redux');// -------------------------------------------------useEffect(() => {const fetchData = async () => {const result = await axios(// -------------------------------------------------`http://hn.algolia.com/api/v1/search?query=${search}`,// -------------------------------------------------);setData(result.data);};fetchData();// -------------------------------------------------}, [search]);// -------------------------------------------------return (...); }export default App;

search的初始狀態也應該和query的初始狀態一樣，因為組件也會在掛載的時候獲取數據，因此結果應該和輸入的一致。然而，query的search狀態一樣讓人有點疑惑。為啥不把search的狀態換成真實的URL呢？

這就是使用effect hook隱式獲取數據的情況。你可以決定這個effect hook依賴哪個狀態，一旦你在點擊的時候或者其他副作用設置這個狀態，這個effect hook將會再次執行。在這個案例中，如果URL狀態改變了，effect hook會再次執行從接口中獲取數據。

React Hooks中的加載指示

讓我來介紹一個獲取數據的加載指示器。它就是另一個狀態鉤子（state hook）管理的狀態（state）。這個加載的標志被用于在App組件中渲染一個加載中的指示器。

import React, { Fragment, useState, useEffect } from 'react'; import axios from 'axios';function App() {const [data, setData] = useState({ hits: [] });const [query, setQuery] = useState('redux');const [url, setUrl] = useState('http://hn.algolia.com/api/v1/search?query=redux',);// -------------------------------------------------const [isLoading, setIsLoading] = useState(false);// -------------------------------------------------useEffect(() => {const fetchData = async () => {// -------------------------------------------------setIsLoading(true);// -------------------------------------------------const result = await axios(url);setData(result.data);// -------------------------------------------------setIsLoading(false);// -------------------------------------------------};fetchData();}, [url]);return (<Fragment><inputtype="text"value={query}onChange={event => setQuery(event.target.value)}/><buttontype="button"onClick={() =>setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)}>Search</button>{/* ------------------------------------------------- */}{isLoading ? (<div>Loading ...</div>) : ({/* ------------------------------------------------- */}<ul>{data.hits.map(item => (<li key={item.objectID}><a href={item.url}>{item.title}</a></li>))}</ul>{/* ------------------------------------------------- */})}{/* ------------------------------------------------- */}</Fragment>); }export default App;

當effect hook在組件掛在或者URL狀態改變的時候被調用去獲取數據，這個加載狀態就會被設置為true。當請求完成了，這個加載狀態就會再次被設置為false。

React Hooks的錯誤處理

在React hook怎么處理獲取數據出錯呢？這個錯誤只是通過另一個狀態鉤子初始化的。當這個狀態表示出錯了，這個 App組件可以給用戶一個反饋。當使用 async/await，常用try/catch塊去處理錯誤。你可以在effect hook里面這樣做：

import React, { Fragment, useState, useEffect } from 'react'; import axios from 'axios';function App() {const [data, setData] = useState({ hits: [] });const [query, setQuery] = useState('redux');const [url, setUrl] = useState('http://hn.algolia.com/api/v1/search?query=redux',);const [isLoading, setIsLoading] = useState(false);// -------------------------------------------------const [isError, setIsError] = useState(false);// -------------------------------------------------useEffect(() => {const fetchData = async () => {// -------------------------------------------------setIsError(false);// -------------------------------------------------setIsLoading(true);// -------------------------------------------------try {// -------------------------------------------------const result = await axios(url);setData(result.data);// -------------------------------------------------} catch (error) {setIsError(true);}// -------------------------------------------------setIsLoading(false);};fetchData();}, [url]);return (<Fragment><inputtype="text"value={query}onChange={event => setQuery(event.target.value)}/><buttontype="button"onClick={() =>setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)}>Search</button>{/* ------------------------------------------------- */}{isError && <div>Something went wrong ...</div>}{/* ------------------------------------------------- */}{isLoading ? (<div>Loading ...</div>) : (<ul>{data.hits.map(item => (<li key={item.objectID}><a href={item.url}>{item.title}</a></li>))}</ul>)}</Fragment>); }export default App;

這個錯誤的狀態在鉤子每次執行的時候都會被重置。這是很有用的，因為在失敗的請求之后，用戶回想再次嘗試，應該重置錯誤狀態。為了檢查出錯的情況，你可以將URL更改為無效的內容。然后查看錯誤消息是否顯示。

通過React和表單的獲取數據

在表單中如何獲取數據？至今，我們只組合了input和按鈕。當你引入了更多的輸入元素，你就會想要使用表單元素包裹他們。另外，一個表單可能通過鍵盤的回車鍵觸發按鈕觸發提交。

function App() {...return (<Fragment>{/* ------------------------------------------------- */}<formonSubmit={() =>setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)}>{/* ------------------------------------------------- */}<inputtype="text"value={query}onChange={event => setQuery(event.target.value)}/>{/* ------------------------------------------------- */}<button type="submit">Search</button></form>{/* ------------------------------------------------- */}{isError && <div>Something went wrong ...</div>}...</Fragment>); }

但是現在瀏覽器在你點擊提交按鈕的時候會刷新，因為這是一個瀏覽器提交表單的原生行為。為了阻止默認行為，我們可以調用React事件對象的函數。就像你在React類組件中做的那樣。

現在點擊提交按鈕的時候瀏覽器就不會再刷新了。它就像之前那樣工作，但是這次使用form替換了原生的輸入字段和按鈕的結合。你也可以在鍵盤上按回車鍵提交表單。

自定義獲取數據鉤子

為了提取一個自定義獲取數據的鉤子，移動每個屬于數據獲取數據的代碼到自己的函數，除了屬于輸入字段的query狀態，但是包含加載指示器和錯誤處理。也要確定你在函數中返回了所有App組件里必要的變量。

// ------------------------------------------------- const useHackerNewsApi = () => { // -------------------------------------------------const [data, setData] = useState({ hits: [] });const [url, setUrl] = useState('http://hn.algolia.com/api/v1/search?query=redux',);const [isLoading, setIsLoading] = useState(false);const [isError, setIsError] = useState(false);useEffect(() => {const fetchData = async () => {setIsError(false);setIsLoading(true);try {const result = await axios(url);setData(result.data);} catch (error) {setIsError(true);}setIsLoading(false);};fetchData();}, [url]); // -------------------------------------------------return [{ data, isLoading, isError }, setUrl]; } // -------------------------------------------------

現在，你的新鉤子在App組件中又可以使用了。

初始狀態也可以通用，通過它簡化新的自定義鉤子。

import React, { Fragment, useState, useEffect } from 'react'; import axios from 'axios';// ------------------------------------------------- const useDataApi = (initialUrl, initialData) => {const [data, setData] = useState(initialData);const [url, setUrl] = useState(initialUrl); // -------------------------------------------------const [isLoading, setIsLoading] = useState(false);const [isError, setIsError] = useState(false);useEffect(() => {const fetchData = async () => {setIsError(false);setIsLoading(true);try {const result = await axios(url);setData(result.data);} catch (error) {setIsError(true);}setIsLoading(false);};fetchData();}, [url]);return [{ data, isLoading, isError }, setUrl]; };function App() {const [query, setQuery] = useState('redux');// -------------------------------------------------const [{ data, isLoading, isError }, doFetch] = useDataApi('http://hn.algolia.com/api/v1/search?query=redux',{ hits: [] },);// -------------------------------------------------return (<Fragment><formonSubmit={event => {doFetch(`http://hn.algolia.com/api/v1/search?query=${query}`,);event.preventDefault();}}><inputtype="text"value={query}onChange={event => setQuery(event.target.value)}/><button type="submit">Search</button></form>{isError && <div>Something went wrong ...</div>}{isLoading ? (<div>Loading ...</div>) : (<ul>{data.hits.map(item => (<li key={item.objectID}><a href={item.url}>{item.title}</a></li>))}</ul>)}</Fragment>); }export default App;

通過自定義鉤子獲取數據。這個鉤子自己不知道關于接口的任何信息。他接受所有從外面傳入的參數并且只管理必要的狀態，例如data，加載狀態和錯誤狀態。他執行請求和返回數據給把它當做自定義獲取數據鉤子使用的組件。

使用Reducer Hook獲取數據

至今，我們使用各個state hooks 去管理我們數據的數據獲取狀態，加載和錯誤狀態。然而，不知為啥，這些狀態被自己的state hook管理，它們應該屬于一起的因為它們關心相同的原因。就像你看到的一樣它們都在數據獲取函數中使用。它們是一起的一個很好的標志是它們一個接著一個的使用（e.g setIsError，setIsLoading）。讓我們使用Reducer Hook結合并替換它們。

一個Reducer Hook 使用一個state對象和一個函數生成一個state對象。這個函數被稱為 —— dispatch函數 —— 分發一個action，這個action里面有一個type屬性和一個可選的payload對象。所有這些信息在真實的reducer函數中被使用去從之前的狀態生成一個新的狀態，所有信息表示為這個action的payload和type。讓我們看看在代碼中是怎么工作的。

import React, {Fragment,useState,useEffect,// -------------------------------------------------useReducer,// ------------------------------------------------- } from 'react'; import axios from 'axios';// ------------------------------------------------- const dataFetchReducer = (state, action) => {... }; // -------------------------------------------------const useDataApi = (initialUrl, initialData) => {const [url, setUrl] = useState(initialUrl);// -------------------------------------------------const [state, dispatch] = useReducer(dataFetchReducer, {isLoading: false,isError: false,data: initialData,});// -------------------------------------------------... };

這個Reducer Hook使用reducer函數和初始的狀態對象作為參數。在我們的例子里，data的初始化狀態，loading和error的初始狀態沒有改變，但是它們替換了單個state hooks，通過reducer hook匯總到一個state對象里面管理。

現在，獲取數據的時候可以使用dispatch函數發送一個信息給reducer函數。dispatch分發的對象有一個約定的type屬性和一個可選的payload屬性。這個type告訴reducer函數哪個狀態需要改變和reducer可以使用payload去提取一個新的state。畢竟我們只有三個狀態改變：初始的獲取進程。通知成功的數據獲取結果。通知失敗的數據獲取結果。

在自定義鉤子的最后，這個state就像之前一樣被返回出去，但是因為我們一整個state對象，所以再也沒有獨立的state了。這樣，使用useDataApi自定義鉤子的人還可以訪問到 data，isLoading和 isError。

最后但是很重要的是，缺少reducer函數的實現。它需要發出三個不同的狀態轉換，叫作 FETCH_INIT， FETCH_SUCCESS 和 FETCH_FAILURE。每個狀態轉換需要返回一個新的狀態對象。讓我們看看這個怎么通過switch case實現：

一個reducer函數可以通過它的arguments訪問當前的state和action。現在switch case語句每個狀態被轉換只返回之前的state。使用解構語句去保證state對象不可變 - 意味著state是不能直接改變的 - 這是最佳實踐。現在讓我們覆蓋一些當前的state需要被返回的屬性來改變狀態轉換的狀態：

現在每個state的轉換。都是通過action的type決定的，基于上一個state和可選的payload屬性返回一個新的state。例如，在請求成功的案例里，payload被用于設置新state對象的data。

總之，Reducer Hook確保狀態管理的這一部分用自己的邏輯封裝。通過提供action type和可選的payloads，你將總是可以預測變化。另外，你將不會再非法的state下運行。例如，先前可能搞錯了設置isLoading和isError狀態變成true。我們在這種情況下怎么展示呢？現在每個狀態的改變都被reducer 函數變成一個合法的state對象。

在Effect Hook中阻止數據獲取

在React中設置未掛載組件的狀態是一個常見的問題（e.g. 由于通過React Router導航的）。我之前寫過關于這個問題的文章，它描述了在各種場景中如何阻止在未掛載的組件中設置state。讓我們看看怎么在我們自定義的數據獲取鉤子里面阻止狀態設置。

每個Effect Hook都有一個匹配的清除函數，它會在組件卸載的時候執行。這個清除函數是一個從hook中返回的函數。在我們的例子里，我們使用名字為didCancel的boolean類型的標志讓我們數據獲取邏輯知道組件狀態（掛載的/未掛載的）。如果組件完成卸載，這個標志應該設置為true這個結果會阻止異步獲取數據完成之后設置組件的狀態。

注：其實數據請求沒有被終止 — 可以通過Axios Cancellation實現終止請求的功能—但是狀態遷移在組件卸載后不會再執行。由于Axios Concellation在我看來沒有更好的API，這個boolean值的標志也可以完成阻止設置state的工作。

你已經學會怎么在React獲取數據的時候使用React hooks中的state和effets鉤子。

如果你對在React類組件（函數式組件）里面使用render屬性和高階組件獲取數據感到好奇，查看本篇文章開始處我的其他文章。除此以外，我希望這篇文章有助于你學習React Hooks和在真實世界中使用他們。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的React hook 中的数据获取的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： create react app创建的项
下一篇：在React中获取数据