这种情况通常是因为API需要一些额外的时间才能返回数据,而前端代码却过早地处理了这些数据。解决方法之一是在API返回数据之前显示“加载中”的界面,并在数据返回之后更新界面。
以下是一个示例代码片段,演示如何处理API返回的数据:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MyComponent = () => {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'https://my-api.com/data',
);
setData(result.data);
setIsLoading(false);
};
fetchData();
}, []);
return (
{isLoading ? (
Loading...
) : (
{data}
)}
);
};
export default MyComponent;
这段代码会在组件加载时发起请求,并在 API 返回数据后更新 state。在数据返回之前,组件会显示“加载中”的文本。