当前位置：首页 > React

react实现数据刷新

2026-01-26 19:02:08React

实现数据刷新的方法

在React中实现数据刷新通常涉及状态管理、副作用处理以及API调用。以下是几种常见的方法：

使用useState和useEffect

通过useState管理数据状态，结合useEffect在组件挂载或依赖项变化时触发数据刷新。

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

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, []); // 空依赖数组表示仅在组件挂载时执行

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

手动刷新按钮

添加一个按钮，通过点击事件触发数据重新加载。

function DataFetcherWithButton() {
  const [data, setData] = useState([]);
  const [refresh, setRefresh] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, [refresh]); // 依赖refresh状态

  return (
    <div>
      <button onClick={() => setRefresh(!refresh)}>刷新数据</button>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  );
}

定时刷新

使用setInterval实现定时数据刷新，注意在组件卸载时清除定时器。

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
    const intervalId = setInterval(fetchData, 5000); // 每5秒刷新一次

    return () => clearInterval(intervalId); // 清除定时器
  }, []);

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

使用React Query

React Query是一个专门用于数据获取和状态管理的库，简化了数据刷新的逻辑。

import { useQuery } from 'react-query';

function DataFetcherWithReactQuery() {
  const { data, isLoading, refetch } = useQuery('data', async () => {
    const response = await fetch('https://api.example.com/data');
    return response.json();
  });

  if (isLoading) return <div>加载中...</div>;

  return (
    <div>
      <button onClick={refetch}>刷新数据</button>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  );
}