从REST API填充上下文，并通过useEffect和useContext在React组件中使用它

Question

先决条件

我在组件中有一个带有一些输入的表格，这些输入需要一些配置数据。配置数据来自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>
    )
};

Answer 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
    })();
  }, []);

很抱歉，无法用打字稿给您答案