如何使用React Hooks优雅的获取数据？
原文链接：https://www.robinwieruch.de/react-hooks-fetch-data
作者简介：https://overreacted.io/zh-hans/my-decade-in-review/
如果我们要请求一个接口获得数据，并要遍历到当前页面中渲染出来，可能会这么写
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(
'https://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
};
fetchData();
}, []);
return (
// 数据展示区
{
data.hits}
);
}
export default App;
如果我们需要修改地址中的查询参数，用一个输入框和一个提交按钮实现。点击按钮时改变url，从而使副作用拉取新的数据，代码如下
export default function BestFetchData() {
const [data, setData] = useState(0)
const [query, setQuery] = useState('')
const [url, setUrl] = useState('http://wthrcdn.etouch.cn/weather_mini?city=青岛')
useEffect(() => {
const fetchData = async () => {
const ret = await axios(url)
setData(ret.data.data)
}
fetchData()
}, [url])
return (
<div>
<h3>可输入内容再搜索</h3>
<input value={
query} onChange={
e => setQuery(e.target.value)} />
<button type='button' onClick={
() => setUrl('http://wthrcdn.etouch.cn/weather_mini?city=' + query)}>搜索</button>
{
data && <>
// 数据展示区
</>}
</div>
)
}
下一步，我们加入loading和错误捕获功能，并通过表单提交事件来实现搜索
export default function () {
const [data, setData] = useState('')
const [query, setQuery] = useState('')
const [url, setUrl] = useState('http://wthrcdn.etouch.cn/weather_mini?city=青岛')
const [isLoading, setIsLoading] = useState(false)
const [isError, setIsError] = useState(false)
useEffect(() => {
const fetchData = async () => {
setIsLoading(true)
setIsError(false)
try{
const ret = await axios(url)
setData(ret.data.data)
}catch(e){
setIsError(true)
}
setIsLoading(false)
}
fetchData()
}, [url])
return (
<div>
<h3>loading+错误捕捉+表单提交</h3>
<p>输入内容后可直接按回车</p>
<form onSubmit={
(e) =>{
e.preventDefault(); setUrl('http://wthrcdn.etouch.cnn/weather_mini?city2==' + query)}}>
<input value={
query} onChange={
e => setQuery(e.target.value)} />
<button type='submit'>搜索</button>
</form>
{
isError&&<div style={
{
background:'pink',padding:'1rem',margin:'1rem'}}>出错啦~~</div>}
{
data && (isLoading
? <div> loading...</div>
: <>
// 数据展示区
</>)}
</div>
)
}
可以使用自定义hooks来把请求相关逻辑进行封装，以便复用。useFetchData 只在乎逻辑处理而不关心数据。
const useFetchData = (initialUrl, initialData) => {
const [url, setUrl] = useState(initialUrl)
const [data, setData] = useState(initialData)
const [isLoading, setIsLoading] = useState(false)
const [isError, setIsError] = useState(false)
useEffect(() => {
const fetchData = async () => {
setIsLoading(true)
setIsError(false)
try {
const ret = await axios(url)
setData(ret.data.data)
} catch (e) {
setIsError(true)
}
setIsLoading(false)
}
fetchData()
}, [url])
return [{
data, isLoading, isError }, setUrl]
}
export default function () {
const [query, setQuery] = useState('')
const [{
data, isLoading, isError }, doFetch] = useFetchData('http://wthrcdn.etouch.cn/weather_mini?city=青岛', null)
return (
<div>
<h3>抽取自定义hooks为公用</h3>
<p>输入内容后可直接按回车</p>
<form onSubmit={
(e) => {
e.preventDefault(); doFetch('http://wthrcdn.etouch.cn/weather_mini?city=' + query) }}>
<input value={
query} onChange={
e => setQuery(e.target.value)} />
<button type='submit'>搜索</button>
</form>
{
isError && <div style={
{
background: 'pink', padding: '1rem', margin: '1rem' }}>出错啦~~</div>}
{
data && (isLoading
? <div> loading...</div>
: <>
// 数据展示区
</>)}
</div>
)
}
可以使用reducer把自定义hook里面比较独立的逻辑再次封装
const dataFetchReducer = (state, action) => {
switch (action.type) {
case 'FETCH_INIT':
return {
...state, isLoading: true, isError: false }
case 'FETCH_SCUESS':
return {
...state, isError: false, isLoading: false, data: action.payload }
case 'FETCH_FAILURE':
return {
...state, isLoading: false, isError: true }
default:
throw new error();
}
}
const useDataApi = (initialUrl, initialData) => {
const [state, dispatch] = useReducer(dataFetchReducer, {
data: initialData,
isLoading: false,
isError: false
})
const {
data, isLoading, isError } = state
const [url, setUrl] = useState(initialUrl)
useEffect(() => {
const fetchData = async () => {
dispatch({
type: 'FETCH_INIT' })
try {
const ret = await axios(url)
dispatch({
type: 'FETCH_SCUESS', payload: ret.data.data })
} catch (e) {
dispatch({
type: 'FETCH_FAILURE' })
}
}
fetchData()
}, [url])
return [state, setUrl]
}
export default function () {
const [query, setQuery] = useState('')
const commonUrl = 'http://wthrcdn.etouch.cn/weather_mini?city='
const [{
data, isLoading, isError }, doFetch] = useDataApi(commonUrl + '青岛', null)
return (
<div>
<h3>使用reducer</h3>
<p>输入内容后可直接按回车</p>
<form onSubmit={
(e) => {
e.preventDefault()
doFetch(commonUrl + query)
}}>
<input value={
query} onChange={
e => setQuery(e.target.value)} />
<button type='submit'>搜索</button>
</form>
{
isError && <div style={
{
background: 'pink', padding: '1rem', margin: '1rem' }}>出错啦~~</div>}
{
data && (isLoading
? <div> loading...</div>
: <>
// 数据展示区
</>)}
</div>
)
}
结束