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

抱歉没能用打字稿给你答案

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

Fill context from REST API and use it in a React component with useEffect and useContext

rest

reactjs

react-context

react-hooks

use-effect

先决条件

目标

完成了什么

问题