在 React 中使用 useEffect 获取数据-js教程-PHP中文网

Using useEffect for Fetching Data in React

在 React 中使用 useEffect 获取数据

在 React 中，useEffect 钩子通常用于在功能组件中执行副作用。从 API 或服务器获取数据是最常见的副作用之一，而 useEffect 可以轻松管理组件中的数据获取。下面是如何在 React 功能组件中使用 useEffect 获取数据的详细说明和示例。

1.基本设置

要使用 useEffect 获取数据，通常使用以下模式：

使用 useEffect 在组件挂载或更新时触发 fetch 请求。
使用 useState 挂钩将获取的数据存储在组件的状态中。
处理加载和错误状态以改善用户体验。

2.使用 useEffect 获取数据的示例

以下示例演示了如何使用 useEffect 和 useState 从 API 获取数据：

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

const DataFetchingComponent = () => {
  // State variables to store data, loading status, and errors
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using useEffect to fetch data
  useEffect(() => {
    // Define the function for fetching data
    const fetchData = async () => {
      try {
        // Start by setting loading state to true
        setLoading(true);

        // Make the fetch request
        const response = await fetch('https://api.example.com/data');

        // Check if the response is ok (status code 200-299)
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        // Parse the JSON data
        const result = await response.json();

        // Update the state with the fetched data
        setData(result);
      } catch (error) {
        // Handle errors and set the error state
        setError(error.message);
      } finally {
        // Set loading to false once the request is complete
        setLoading(false);
      }
    };

    // Call the fetchData function
    fetchData();
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Conditionally render the UI based on loading, error, and data
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

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

export default DataFetchingComponent;

登录后复制

3.代码细目：

状态变量：
- data：成功检索后存储所获取的数据。
- 加载：一个布尔状态，用于跟踪数据是否仍在获取中。
- error：存储在获取过程中发生的任何错误消息。
useEffect Hook：
- 我们在 useEffect 挂钩中定义一个异步函数 fetchData。
- fetchData 在组件挂载时立即调用，因为依赖数组 [] 为空。
- 在 fetchData 内部，我们使用 fetch() 方法进行 API 调用。获取数据后，我们检查错误（例如，非 200 响应）并相应更新状态。
加载和错误处理：
- 当获取请求正在进行时，组件最初呈现“正在加载...”消息。
- 如果在获取过程中发生错误，则会显示错误消息。
- 数据获取成功后，会显示在列表中。

4.需要记住的要点：

useEffect 中的异步函数：
- useEffect 本身无法标记为异步，但您可以在效果内定义异步函数并调用它。
空依赖数组 ([]):
- 当依赖数组为空时，该效果仅在初始渲染后运行一次，模仿类组件中 componentDidMount 的行为。
错误处理：
- 处理错误以确保应用程序在获取失败时不会崩溃或出现意外行为非常重要。
状态管理：
- 使用 useState 来管理加载、数据和错误状态，可以轻松相应地管理和显示 UI。

5.用于数据获取的 useEffect 的常见模式

点击按钮获取数据（手动触发效果）

有时，您可能不想在组件安装时获取数据，而是希望基于用户交互（例如单击按钮）获取数据。在这种情况下，您可以通过从事件处理程序更新状态变量来触发 useEffect。

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

const DataFetchingComponent = () => {
  // State variables to store data, loading status, and errors
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using useEffect to fetch data
  useEffect(() => {
    // Define the function for fetching data
    const fetchData = async () => {
      try {
        // Start by setting loading state to true
        setLoading(true);

        // Make the fetch request
        const response = await fetch('https://api.example.com/data');

        // Check if the response is ok (status code 200-299)
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        // Parse the JSON data
        const result = await response.json();

        // Update the state with the fetched data
        setData(result);
      } catch (error) {
        // Handle errors and set the error state
        setError(error.message);
      } finally {
        // Set loading to false once the request is complete
        setLoading(false);
      }
    };

    // Call the fetchData function
    fetchData();
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Conditionally render the UI based on loading, error, and data
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

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

export default DataFetchingComponent;

登录后复制

在此示例中：