react如何获取数据

使用 Fetch API 获取数据

Fetch API 是浏览器原生支持的 HTTP 请求工具，无需额外安装库。发送 GET 请求并处理响应：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在 React 组件中结合 useEffect 使用：

import { useState, useEffect } from 'react';

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

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

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

使用 Axios 库获取数据

Axios 提供更简洁的 API 和错误处理机制。首先安装 axios：

npm install axios

在组件中使用：

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

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

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

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

使用 React Query 管理数据

React Query 专为数据获取和状态管理设计。安装依赖：

npm install react-query

基本使用模式：

import { useQuery } from 'react-query';

function QueryComponent() {
  const { isLoading, error, data } = useQuery('repoData', () =>
    fetch('https://api.example.com/data').then(res => res.json())
  );

  if (isLoading) return 'Loading...';
  if (error) return 'An error occurred';

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

使用 useEffect 的注意事项

当需要在组件卸载时取消请求：

useEffect(() => {
  const controller = new AbortController();

  fetch('https://api.example.com/data', { signal: controller.signal })
    .then(res => res.json())
    .then(setData);

  return () => controller.abort();
}, []);

处理加载和错误状态

完整的异步数据获取应包含状态管理：

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

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await axios.get('https://api.example.com/data');
      setData(response.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  fetchData();
}, []);

if (loading) return <p>Loading data...</p>;
if (error) return <p>Error: {error}</p>;
return <DisplayComponent data={data} />;

使用自定义 Hook 封装逻辑

创建可复用的数据获取 Hook：

function useFetchData(url) {
  const [state, setState] = useState({ data: null, loading: true, error: null });

  useEffect(() => {
    setState(prev => ({ ...prev, loading: true }));

    fetch(url)
      .then(res => res.json())
      .then(data => setState({ data, loading: false, error: null }))
      .catch(error => setState({ data: null, loading: false, error }));
  }, [url]);

  return state;
}

// 在组件中使用
function MyComponent() {
  const { data, loading, error } = useFetchData('https://api.example.com/data');
  // ...渲染逻辑
}