如何从 API 中使用 useEffect 获取数据

React 中的 useEffect 钩子可以用来在组件渲染时获取 API 数据。这样可以将数据存储在组件状态中，以便在渲染时使用。

使用 useEffect 获取数据

下面是使用 useEffect 从一个 API 中获取数据的一般步骤：

1. 导入 React 和 useEffect：

import React, { useEffect } from "react";

2. 声明一个状态和一个 useEffect 钩子：

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

useEffect(() => {
  // 数据获取代码
}, []);

在这个例子中，我们定义了一个 data 状态，它存储从 API 中获得的数据。我们还定义了一个空数组 [] 作为 useEffect 的第二个参数，这样 useEffect 只会在渲染时运行一次。

3. 在 useEffect 内部，使用 fetch() 函数或 Axios 库等向 API 发送请求：

useEffect(() => {
  fetch("https://my-api.com")
    .then((response) => response.json())
    .then((data) => setData(data));
}, []);

在这个例子中，我们使用 fetch() 函数从 https://my-api.com 发送请求。我们调用 .json() 方法将响应转换为 JSON，然后将数据存储在 data 状态变量中。

4. 在组件中使用获取的数据：

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

在这个例子中，我们将获取的数据显示在一个无序列表中。

完整例子

下面是一个完整的使用 useEffect 从 API 中获取数据的例子：

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://my-api.com")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

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

export default App;

在这个例子中，我们定义了一个 App 组件来获取和渲染数据。我们使用 useState 定义 data 状态和 setData() 函数。在 useEffect 内部，我们使用 fetch() 函数获取数据，然后使用 setData() 函数更新 data 状态。最后，我们使用 data.map() 方法将每个项目渲染为一个列表项。

结论

使用 useEffect 可以方便地在 React 应用程序中获取 API 数据。在 useEffect 内部使用 fetch() 函数或 Axios 库等从 API 获取数据，然后将数据存储在组件状态中。这样我们可以使用这些数据在组件中进行渲染。