使用 useEffect Hook 来获取 API 是最佳实践,但不使用也不是完全错误的。下面是一个不使用 useEffect Hook 的解决方法的代码示例:
import React, { useState } from 'react';
const App = () => {
const [data, setData] = useState(null);
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
} catch (error) {
console.log('Error fetching data: ', error);
}
};
return (
{data ? (
{data.map((item) => (
- {item.name}
))}
) : (
No data available
)}
);
};
export default App;
在以上代码示例中,我们使用了 useState Hook 来定义 data
状态,并使用 fetchData
函数来获取 API 数据并更新 data
状态。当点击按钮时,调用 fetchData
函数来获取数据并展示在页面上。