web-dev-qa-db-ja.com

反応jsでformikの状態値を初期値に渡す方法

反応アプリケーションで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
              )} />
              )
            }
    }
reactjsjsxformik
6
Abhiram

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