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

作者站长头像
站长
· 阅读数 9

现在想要传递一个初始化的表单数据到 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>
    );
}
回复
1个回答
avatar
test
2024-06-27

用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>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容