reactjs - 如何在formik中将状态值传递给初始值
Posted
技术标签:
【中文标题】reactjs - 如何在formik中将状态值传递给初始值【英文标题】:How to pass state values to initial values in formik in react js 【发布时间】:2019-05-24 00:18:01 【问题描述】:我在我的反应应用程序中使用 formik 库。最初,我在构造函数中声明了状态值,在 componentDidMount 中我正在调用一个 API,该应用程序响应正在更新状态值,任何人都可以帮助我将状态值传递给 fomik 初始值
在我的情况下,formik 采用在构造函数中声明的初始状态值。提前感谢
class Dropdown extends Component
constructor(props)
super(props);
this.state =
//some data
;
componentDidMount()
//api call
this.setState(
//update state values with api response data
);
render()
return (
<Formik
initialValues=this.state
validate=validate(validationSchema)
onSubmit=onSubmit
render=
(
values,
errors,
touched,
status,
dirty,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
isValid,
handleReset,
setTouched
) => (
//form uses initialValues
) />
)
【问题讨论】:
【参考方案1】:感谢 Abhiram,但如果您已更新到钩子:
useFormik(
initialValues: initialData,
enableReinitialize: true,
onSubmit: values =>
// Do something
);
【讨论】:
谢谢老兄。 enableReinitialize 节省了一天。 上帝保佑你!!!【参考方案2】:您可以在 initialValues 属性中强制设置每个值:
<Formik
initialValues=
formValue1: this.state.value1,
formValue2: this.state.value2,
...
validate=validate(validationSchema)
onSubmit=onSubmit
render=
(
values,
errors,
touched,
status,
dirty,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
isValid,
handleReset,
setTouched
) => (
//form uses initialValues
)
/>
【讨论】:
【参考方案3】:将 enableReinitialize 添加到 formik 解决了我的问题
<Formik
enableReinitialize
..
render=
(
..
) => (
//form uses initialValues
) />
【讨论】:
以上是关于reactjs - 如何在formik中将状态值传递给初始值的主要内容,如果未能解决你的问题,请参考以下文章
Reactjs 如何在 formik 中使用 onCompleted() 传递值
如何在 ReactJS 中将更改的状态从子组件传递给其父组件
在reactjs中将额外的参数传递给onChange Listener
如何将 react-intl-tel-input 与 formik 集成?