Reactjs 如何在react js中将状态值传递给formik中的初始值
我在react应用程序中使用了formik库。最初,我在构造函数中声明了状态值,在componentDidMount中,我正在调用一个API,应用程序响应正在更新状态值,有人能帮我将状态值传递给fomik初始值吗 在我的情况下,formik将获取构造函数中声明的初始状态值。提前感谢Reactjs 如何在react js中将状态值传递给formik中的初始值,reactjs,jsx,formik,Reactjs,Jsx,Formik,我在react应用程序中使用了formik库。最初,我在构造函数中声明了状态值,在componentDidMount中,我正在调用一个API,应用程序响应正在更新状态值,有人能帮我将状态值传递给fomik初始值吗 在我的情况下,formik将获取构造函数中声明的初始状态值。提前感谢 class Dropdown extends Component { constructor(props) { super(props); this.
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
)} />
)
}
}
类下拉列表扩展组件{
建造师(道具){
超级(道具);
此.state={
//一些数据
};
}
componentDidMount(){
//api调用
此.setState({
//使用api响应数据更新状态值
});
}
render(){
返回(
(
//表单使用初始值
)} />
)
}
}
将enableReinitialize添加到formik解决了我的问题
<Formik
enableReinitialize
..
render={
({
..
}) => (
//form uses initialValues
)} />
(
//表单使用初始值
)} />
您可以强制将每个值设置为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
)
}
/>
(
//表单使用初始值
)
}
/>
回答Abhiram的问题,但如果您已更新为:
useFormik({
initialValues: initialData,
enableReinitialize: true,
onSubmit: values => {
// Do something
}
});