从 REST API 填充上下文并在带有 useEffect 和 useContext 的 React 组件中使用它

Posted 2023-04-14

【中文标题】从 REST API 填充上下文并在带有 useEffect 和 useContext 的 React 组件中使用它

【英文标题】：Fill context from REST API and use it in a React component with useEffect and useContext

【发布时间】：2020-06-12 13:02:31

【问题描述】：

先决条件

我在一个带有一些输入的组件中有一个表单，这些输入需要一些配置数据。配置数据来自 REST API。

目标

调用 REST API 并将配置数据存储在 React 上下文中，以便重复使用。

做了什么

1/ 我创建了组件及其输入。 2/ 我使用模拟配置数据来渲染组件。 3/ 我创建了上下文，所以我用 React 上下文提供的一组新配置数据替换了模拟配置数据（总是模拟）。 4/ 我用来自 REST API 的配置数据填充了上下文。

问题

我在组件中使用上下文 API，但从上下文返回的配置数据为空。

interface ContextType 
  formConfig: any[];


export const Context = React.createContext<ContextType>(
 formConfig: [],
 getFormConfig: () => [],
);


export const ContextProvider: React.FC<
  children: React.ReactNode;
> = ( children ) => 

  let formConfig: any[] = [];

  function getFormConfig() 
    return formConfig;
  

  useEffect(() => 
    (async function fetchData() 
      formConfig = await ServiceConfig.getFormTypes();
      console.log(formConfig, 'use effect of context'); // It shows the conf
    )();
  , []);


  return (
    <Context.Provider
      value=
        getFormConfig,
        formConfig
      
    >
      children
    </Context.Provider>
  );
;

const FormUI: React.FC = () => 


    const  getFormConfig  = useContext(Context);

    useEffect(() => 
        console.log(getFormConfig(), 'form'); // it is empty here
    , []);

    return (
        <ContextProvider>
            ....
        </ContextProvider>
    )
;

【参考方案1】：

let formConfig: any[] = [];只是一个变量，当你重新渲染它时，它会被重新创建并分配[]给它。

你需要将它存储在一个状态中。

const [formConfig, setFormConfig] = React.useState([])

在异步函数中，你设置状态

  useEffect(() => 
    (async function fetchData() 
      formConfig = await ServiceConfig.getFormTypes();
      setFormConfig(formConfig) // setting the state
      console.log(formConfig, 'use effect of context'); // It shows the conf
    )();
  , []);

很抱歉无法在打字稿中给你答案