web-dev-qa-db-fra.com

Comment passer des valeurs d'état aux valeurs initiales dans formik dans react js

J'utilise la bibliothèque formik dans mon application React. Initialement, j'ai déclaré des valeurs d'état dans le constructeur, dans componentDidMount j'appelle une API avec cette réponse d'application, je mets à jour les valeurs d'état, quelqu'un peut-il m'aider à transmettre des valeurs d'état aux valeurs initiales fomik

Dans ma situation, formik prend les valeurs de l'état initial qui sont déclarées dans le constructeur.Merci à l'avance

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

Vous pouvez impérativement définir chaque valeur à initialValues ​​prop:

 <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
    )
  } 
/>
1
David Casanellas