在 React JS 中从 API 获取和显示数据的指南

已发表: 2024-10-01

从 API 获取和显示数据是现代 React 应用程序中的一项基本任务。随着 React 的发展，获取数据变得更加简化，并提供多种方法来发出 HTTP 请求。在本指南中，我们将介绍使用 React 获取和显示数据的步骤。

目录

切换

设置 React 项目

在深入了解 API 获取之前，请确保您已经设置了一个 React 项目。您可以使用以下命令创建一个

  • npx create-react-app my-app
    cd my-app
    npm start

这会初始化一个新的 React 项目并运行一个开发服务器。

️ 一步一步：在 React 中获取数据

1.创建存储数据的状态

使用useState挂钩创建一个状态变量来存储获取的数据。

javascript

  • const [data, setData] = useState([]);

2.使用useEffect获取API数据

React 的useEffect钩子确保在组件安装时获取数据。 fetch()函数用于从 API 检索数据。

javascript

  • useEffect(() => {
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error:', error));
    }, []);

3.显示获取的数据

获取数据后，可以使用map()方法在 JSX 中呈现数据：

  • return (
    <div>
    <ul>
    {data.map(item => (
    <li key={item.id}>{item.name}</li>
    ))}
    </ul>
    </div>
    );

️ 使用axios获取数据

尽管fetch()是原生浏览器 API，但许多开发人员更喜欢使用像Axios这样的库，因为它简单且功能强大。下面是使用 Axios 的示例：

安装 Axios ：

  • npm install axios

获取数据

  • useEffect(() => {
    axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error('Error:', error));
    }, []);

处理边缘情况

  • 加载状态：在获取数据时管理加载状态非常重要。
  • 错误处理：实施正确的错误处理可以增强用户体验。

例子：

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

结论

从 React 中的 API 获取和显示数据对于创建动态 Web 应用程序至关重要。无论是使用fetch() API 还是像 Axios 这样的库，该过程都涉及定义存储数据的状态、发出请求和呈现结果。通过了解这些步骤并处理加载和错误等边缘情况，您可以高效地构建响应迅速、数据驱动的应用程序。

常见问题解答

1.如何设置React项目来开始获取API数据？

要设置 React 项目，请运行以下命令：

npx create-react-app my -app
cd my -app
npm start

这将初始化项目并启动开发服务器。

2.如何在 React 中存储获取的数据？

您可以使用useState挂钩存储获取的数据。例子：

const [data, setData] = useState ([]);

3.当组件挂载时，如何在React中获取数据？

当组件挂载时使用useEffect hook 来获取数据：

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. then ( response => response. json ())
. then ( data => setData (data))
. catch ( error => console . error ( 'Error:' , error));
}, []);

4. React中渲染数据时使用map()方法的目的是什么？

map()方法用于循环获取的数据数组并渲染 JSX 中的每个项目。例如：

<ul>
{data. map ( item => (
< li key = {item.id} > {item.name} </ li >
))}
</ul>

5.为什么我要使用 Axios 而不是 fetch API？

许多开发人员更喜欢 Axios，因为它简化了 HTTP 请求，提供了更多功能，并且更一致地支持旧版浏览器。

6.如何在我的 React 项目中安装 Axios？

要安装 Axios，请运行：

npm install axios

7. React 中如何使用 Axios 获取数据？

使用 Axios，您可以像这样获取数据：

useEffect ( () => {
axios. get ( 'https://api.example.com/data' )
. then ( response => setData (response. data ))
. catch ( error => console . error ( 'Error:' , error));
}, []);

8.在 React 中获取数据时如何处理加载状态？

您可以通过使用useState创建loading变量来管理加载状态。例如：

const [loading, setLoading] = useState ( true );

useEffect ( () => {
获取（ 'https://api.example.com/data' ）
。然后（响应=>响应.json （））
。然后（数据=> {
设置数据（数据）；
setLoading (假);
});
}, []);

9.获取数据时出现错误如何处理？

要处理错误，请定义error状态并在请求失败时更新它：

const [error, setError] = useState ( null );

useEffect ( () => {
获取（ 'https://api.example.com/data' ）
。捕获（错误=> {
设置错误（错误）；
setLoading (假);
});
}, []);

10.为什么处理 API 获取中的加载和错误等边缘情况很重要？

处理加载和错误等边缘情况可确保用户了解数据获取的当前状态，并在数据检索失败或需要时间的情况下提供更流畅的用户体验。