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 集成?

reactjs:使用 reactstrap ui 的带有数据时间选择器的 formik 表单示例

如何在 Reactjs 中将数据从子组件传递到父组件? [复制]