如何在反应js中将状态值传递给formik中的初始值

How to pass state values to initial values in formik in react js

我在我的 React 应用程序中使用 formik 库。最初,我在构造函数中声明了状态值,在 componentDidMount 中我调用了一个 API 应用程序响应正在更新状态值,任何人都可以帮助我将状态值传递给 fomik 初始值

在我的情况下,formik 会采用预先在 constructor.thanks 中声明的初始状态值

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
              )} />
              )
            }
    }

为 formik 添加 enableReinitialize 解决了我的问题

     <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,但如果您已更新到 hooks:

useFormik({
  initialValues: initialData,
  enableReinitialize: true,
  onSubmit: values => {
    // Do something
  }
});