React中如何在所有修改后端数据的函数执行后自动调用拉取数据方法？

下面提供3种不同复杂度的实现方案，可根据项目规模选择：

方案1：轻量封装操作函数（无额外依赖，小项目适用） #

先抽离统一的数据拉取逻辑，再用高阶函数包装所有修改类操作，自动执行刷新逻辑：

// 1. 抽离公共的拉取数据、更新状态逻辑
const fetchLatestData = async () => {
  const res = await axios.get('/你的数据接口地址');
  setData(res.data);
};

// 2. 封装统一的操作执行器，自动在操作成功后刷新数据
const runWithRefresh = async (operationFn) => {
  try {
    await operationFn();
    await fetchLatestData();
  } catch (err) {
    // 可在这里统一添加错误提示逻辑
    console.error('操作执行失败:', err);
  }
};

// 3. 业务代码直接简化为：
const createItem = (formData) => runWithRefresh(() => axios.post('/api/items', formData));
const deleteItem = (id) => runWithRefresh(() => axios.delete(`/api/items/${id}`));
const updateItem = (id, formData) => runWithRefresh(() => axios.put(`/api/items/${id}`, formData));

所有修改类操作只要包在runWithRefresh里即可，不需要重复写拉取逻辑。

方案2：自定义CRUD Hook（多页面复用场景适用） #

如果多个页面都有类似的CRUD需求，可以把整套逻辑封装为自定义Hook，复用性更强：

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

// 通用CRUD Hook，传入基础接口地址即可使用
const useCRUD = (baseApi) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  // 拉取最新数据
  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await axios.get(baseApi);
      setData(res.data);
    } finally {
      setLoading(false);
    }
  };

  // 执行修改操作并自动刷新
  const execOperation = async (op) => {
    setLoading(true);
    try {
      await op();
      await fetchData();
    } catch (err) {
      console.error('操作失败:', err);
      throw err;
    } finally {
      setLoading(false);
    }
  };

  // 内置常用CRUD方法
  const create = (payload) => execOperation(() => axios.post(baseApi, payload));
  const remove = (id) => execOperation(() => axios.delete(`${baseApi}/${id}`));
  const update = (id, payload) => execOperation(() => axios.put(`${baseApi}/${id}`, payload));

  // 组件挂载自动拉取初始数据
  useEffect(() => {
    fetchData();
  }, []);

  return { data, loading, create, remove, update, refetch: fetchData };
};

// 组件内使用示例
const ItemPage = () => {
  const { data, loading, create, remove } = useCRUD('/api/items');

  const handleAdd = () => create({ name: '新条目' });
  const handleDelete = (id) => remove(id);

  return (
    <div>
      {/* 页面渲染逻辑 */}
    </div>
  );
};

方案3：使用请求库（中大型项目适用） #

如果项目已经引入TanStack Query（原React Query）、SWR这类数据请求库，可以直接用库自带的缓存失效能力实现自动刷新，还能额外获得加载状态管理、错误重试、重复请求去重等能力，以TanStack Query为例：

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

const ItemPage = () => {
  const queryClient = useQueryClient();
  // 定义数据查询，绑定唯一queryKey
  const { data, isLoading } = useQuery({
    queryKey: ['items'],
    queryFn: () => axios.get('/api/items').then(res => res.data)
  });

  // 新增操作mutation，成功后自动失效queryKey为items的查询，触发自动刷新
  const createMutation = useMutation({
    mutationFn: (payload) => axios.post('/api/items', payload),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['items'] })
  });

  // 删除操作mutation
  const deleteMutation = useMutation({
    mutationFn: (id) => axios.delete(`/api/items/${id}`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['items'] })
  });

  return (
    <div>
      <button onClick={() => createMutation.mutate({ name: '新条目' })}>
        {createMutation.isLoading ? '提交中' : '新增'}
      </button>
      {/* 列表渲染逻辑 */}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Ghost