React中useEffect+useContext从REST API填上下文数据为空问题

我来帮你拆解下导致Context数据为空的核心问题，主要有两个关键错误：

1. ContextProvider的位置错误 #

你的FormUI组件在函数体内调用了useContext(Context)，但却在组件的return里才渲染ContextProvider。这意味着FormUI本身并不在Context的作用域内，useContext拿到的只是你创建Context时设置的默认值（空数组），根本访问不到Provider里的真实数据。

2. 未用React状态管理配置数据 #

你用普通的let formConfig来存储API返回的数据，React无法追踪普通变量的变化。就算异步请求成功拿到了数据，也不会触发ContextProvider的重渲染，子组件自然感知不到数据更新。

修改后的完整代码 #

第一步：修复ContextProvider，用State管理数据 #

import { useState, useEffect, createContext, ReactNode } from 'react';

interface ContextType { 
  formConfig: any[]; 
}

// 移除不必要的getFormConfig，直接暴露formConfig即可
export const Context = createContext<ContextType>({ formConfig: [] });

export const ContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  // 用useState替代普通变量，让React追踪数据变化
  const [formConfig, setFormConfig] = useState<any[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const configData = await ServiceConfig.getFormTypes();
        setFormConfig(configData);
        console.log(configData, 'use effect of context');
      } catch (err) {
        console.error('Failed to fetch form config:', err);
      }
    };
    fetchData();
  }, []);

  return (
    <Context.Provider value={{ formConfig }} >
      {children}
    </Context.Provider>
  );
};

第二步：调整组件层级，让FormUI处于Context作用域内 #

const FormUI: React.FC = () => {
  const { formConfig } = useContext(Context);

  // 依赖formConfig，数据更新时自动触发
  useEffect(() => {
    console.log(formConfig, 'form');
  }, [formConfig]);

  return (
    <div>
      {/* 这里用formConfig渲染你的输入框 */}
      {formConfig.map((field, index) => (
        <input 
          key={index} 
          type={field.type || 'text'} 
          placeholder={field.label} 
        />
      ))}
    </div>
  );
};

// 在应用的外层包裹ContextProvider，确保所有需要数据的组件都在作用域内
function App() {
  return (
    <ContextProvider>
      <FormUI />
    </ContextProvider>
  );
}

关键修改说明 #

• 用useState管理数据：调用setFormConfig时会触发ContextProvider重渲染，更新Context的value，子组件就能拿到最新数据。
• 调整Provider位置：让需要访问Context的组件（如FormUI）成为Provider的子元素，确保useContext能正确获取到Provider提供的值。
• 添加依赖项：在FormUI的useEffect中加入formConfig作为依赖，这样数据更新时会自动执行回调，你就能看到最新的配置数据了。

内容的提问来源于stack exchange，提问作者Ali Ben Messaoud