在React中,你可以在组件的生命周期方法中调用API来在页面加载时获取数据。以下是一个示例:
import React, { useEffect, useState } from 'react';
const MyComponent = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch('api-url');
const jsonData = await response.json();
setData(jsonData);
} catch (error) {
console.error('Error fetching data:', error);
}
};
return (
<div>
{/* 在这里使用获取到的数据进行渲染 */}
</div>
);
};
export default MyComponent;
在上面的示例中,我们使用了React的useEffect
钩子函数来在组件加载时调用fetchData
函数。fetchData
函数使用fetch
API来获取数据,并将其存储在组件的状态中(使用useState
钩子函数)。一旦数据获取完成,组件将重新渲染,并可以在返回的JSX中使用该数据。
领取专属 10元无门槛券
手把手带您无忧上云