React 组件状态管理 useContext 的 Provider 怎么传递额外参数？

Question

现在想要传递一个初始化的表单数据到 useState 里而且表单里的字段是通过接口出来的，但现在根据文档参数被 {} 限制了，想问下额外的参数要怎么传递？<FormProvider>

export function FormProvider({ children } : { children: React.ReactNode }) {
    const [form, setFrom] = useState({})

    return (
        <FormContext.Provider value={form}>
            <FormDispatchContext.Provider value={setFrom}>
                {children}
            </FormDispatchContext.Provider>
        </FormContext.Provider>
    );
}

Answer 1

用initialData属性来初始化useState：

export function FormProvider({ children, initialData } : { children: React.ReactNode, initialData: any }) {
    const [form, setForm] = useState(initialData || {});

    return (
        <FormContext.Provider value={form}>
            <FormDispatchContext.Provider value={setForm}>
                {children}
            </FormDispatchContext.Provider>
        </FormContext.Provider>
    );
}

用的时候：

<FormProvider initialData={yourInitialData}>
  // ... 组件
</FormProvider>