在React中,使用fetch API从服务器获取数据是一种常见的方式。下面是一个基本示例,展示如何使用fetch从API获取数据并在React组件中进行渲染。
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
Posts:
{data.map(item => (
- {item.title}
))}
);
}
export default App;
在上面的示例中,我们使用了React的useState和useEffect hooks来创建和更新组件状态。在useEffect中,我们使用fetch函数从API获取数据,并将其存储在组件状态中。最后,我们可以使用.map方法遍历数据并呈现它们。
您可以根据需要更改示例中的URL,以从特定API获取数据。