良好的用户体验是需要在请求后端数据，数据还没有返回时展现loading的状态，
因此，我们还需要添加一个loading的state
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(
'urladdress?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>
<input
type="text"
value={query}
onChange={event =>
setQuery(event.target.value)}
/>
<button
type="button"
onClick={() =>
setUrl(`urladdress?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>
);
}
在useEffect中，请求数据前将loading置为true，
在请求完成后，将loading置为false。
我们可以看到useEffect的依赖数据中并没有添加loading，
这是因为，我们不需要再loading变更时重新调用useEffect。
请记住：只有某个变量更新后，需要重新执行useEffect的情况，
才需要将该变量添加到useEffect的依赖数组中。
loading处理完成后，还需要处理错误，
这里的逻辑是一样的，使用useState来创建一个新的state，
然后在useEffect中特定的位置来更新这个state。
由于我们使用了async/await，可以使用一个大大的try-catch:
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(
'urladdress?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 (......)
每次useEffect执行时，将会重置error；
在出现错误的时候，将error置为true；
在正常请求完成后，将error置为false。