如何使用 setTimeout() 在 React 中使用钩子的加载状态?

Question

我有一个从 API 获取数据的应用程序。在获取时，有一个加载状态，在屏幕上显示一个图标。然而，这是一个快速的闪光。我想在屏幕上显示加载图标 2 秒钟，以改进 UI 并让用户知道正在发生某些事情。

这是我的代码：

const [info, setInfo] = useState({});
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
axios
.get(`https://restcountries.eu/rest/v2/alpha/${code}`)
.then((response) => {
console.log(response);
setInfo(response.data);
setLoading(false);
});
}, []);
return (
<div>
<Link to='/'>
<button>Back</button>
</Link>
{loading ? (
<LoadingIcon />
) : (
<CountryInfo
info={info}
borders={borders}
languages={languages}
currencies={currencies}
/>
)}
</div>
);
};

Answer 1

你可以使用 promise.all

因此，即使您的请求提前发出，您的加载也会显示至少 2 秒。

setLoading(true);
const fetchPromise = axios
.get(`https://restcountries.eu/rest/v2/alpha/${code}`);
const timeOutPromise = new Promise(resolve => {
setTimeout(resolve, 2000);
})
Promise.all([fetchPromise, timeOutPromise]).then(([response]) => {
console.log(response);
setInfo(response.data);
setLoading(false);
})

Answer 2

一旦数据加载 Loading US 设置为 false，API 调用就是异步的，因此您只能看到它一秒钟。

或者，您也可以执行此操作。

{Object.entries(info).length === 0 && info.constructor === Object ? (
<LoadingIcon />
) : (
<CountryInfo
info={info}
borders={borders}
languages={languages}
currencies={currencies}
/>

Answer 3

useEffect(() => {
setLoading(true);
const request = axios
.get(`https://restcountries.eu/rest/v2/alpha/${code}`);
const timer = new Promise(resolve => setTimeout(resolve, 2000));
return Promise.all([request, timer]).then(([response]) => {
console.log(response);
setInfo(response.data);
setLoading(false);
});    
}, []);

Answer 4

只需在 axios 回调中添加 setTimeout(((=>setLoad(false(，2000( 即可。请注意，这将增加加载时间的 2 秒，因此请务必进行相应调整。

Answer 5

在成功回调中添加setTimeout。

useEffect(() => {
setLoading(true);
axios
.get(`https://restcountries.eu/rest/v2/alpha/${code}`)
.then((response) => {
console.log(response);
setTimeout(function(){
setInfo(response.data);
setLoading(false);
},2000)
});
}, []);