使用useReducer与useContext加载API数据时出现无限循环问题

无限循环的核心原因 #

你的代码陷入无限循环的本质是：
ClientProvider 每次渲染时，getClients 函数都会被重新创建；子组件 ClientContextComponent 的 useEffect 依赖了 getClients，每次函数引用变化就会触发API请求；请求完成后 dispatch 更新状态，导致 ClientProvider 因状态变化重新渲染，getClients 再次被创建，形成闭环。

具体解决步骤 #

1. 用 useCallback 稳定 getClients 的引用 #

在 clientContext.js 中，用 useCallback 包裹 getClients，利用 useReducer 返回的 dispatch 引用稳定的特性，确保函数不会随渲染频繁重建：

import React, { createContext, useReducer, useContext, useCallback } from 'react'; // 新增useCallback导入
import api from '../api';

// ... 原有initialState和clientReducer代码不变

export const ClientProvider = ({ children }) => {
  const [state, dispatch] = useReducer(clientReducer, initialState);

  // 用useCallback缓存函数，依赖仅为稳定的dispatch
  const getClients = useCallback(async () => {
    const clients = await api.get('/clients');
    dispatch({ type: 'GET_CLIENTS', payload: clients });
  }, [dispatch]);

  return (
    <ClientContext.Provider value={{ state, getClients }}>
      {children}
    </ClientContext.Provider>
  );
};

export const useClientContext = () => {
  return useContext(ClientContext);
};

2. 避免 ClientProvider 不必要的渲染 #

当前 MainContent 因 useLocation 会随路由变化频繁渲染，导致 ClientProvider 反复重建。可以将 ClientProvider 移到更高层级（比如 App.js），让它只在应用初始化时渲染一次：

// App.js示例
import { ClientProvider } from './hooks/clientContext';
import MainContent from './components/MainContent';

function App() {
  return (
    <ClientProvider>
      {/* 其他全局组件，比如路由、导航 */}
      <MainContent />
    </ClientProvider>
  );
}

3. 增加加载状态，防止重复请求（可选但推荐） #

在状态中加入加载标识，避免因意外触发多次API请求：

// clientContext.js修改initialState
const initialState = {
  clients: [],
  client: {},
  isLoading: false,
};

// 修改clientReducer
const clientReducer = (state, action) => {
  switch (action.type) {
    case 'SET_LOADING':
      return { ...state, isLoading: action.payload };
    case 'GET_CLIENTS':
      return { ...state, clients: action.payload, isLoading: false };
    // ... 其他case
    default:
      return state;
  }
};

// 更新getClients
const getClients = useCallback(async () => {
  if (state.isLoading) return; // 正在加载时直接返回
  dispatch({ type: 'SET_LOADING', payload: true });
  try {
    const clients = await api.get('/clients');
    dispatch({ type: 'GET_CLIENTS', payload: clients });
  } catch (err) {
    console.error('获取客户数据失败:', err);
    dispatch({ type: 'SET_LOADING', payload: false });
  }
}, [dispatch, state.isLoading]);

4. 把数据请求逻辑移到Provider中（优化可读性） #

如果觉得子组件中写 useEffect 调用请求可读性差，可以直接在 ClientProvider 中处理数据加载，子组件只负责消费状态：

// clientContext.js中新增useEffect
export const ClientProvider = ({ children }) => {
  const [state, dispatch] = useReducer(clientReducer, initialState);

  const getClients = useCallback(async () => {
    // ... 同上修改后的getClients逻辑
  }, [dispatch, state.isLoading]);

  // Provider挂载时自动请求数据
  useEffect(() => {
    getClients();
  }, [getClients]);

  return (
    <ClientContext.Provider value={{ state }}>
      {children}
    </ClientContext.Provider>
  );
};

此时子组件 ClientContextComponent 无需再写 useEffect，直接从context中取 state.clients 即可。

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