Question

我用formik创建了表单。我想用表单编辑记录。我想从数据库中获取数据并用它们填充表单。但没有成功。

这是我的代码。

class UserForm extends Component {

  componentWillMount(){
    this.setState({firstName:''})
    var repository = new Repository();
    repository.getUser(function(user){
       this.setState({
        firstName: user.firstName,
       });
    }.bind(this),this.props.currentId)        
  }

  render() {
    return (
      <Formik
      initialValues={{
        firstName: this.state.firstName,
      }}
        validationSchema = {Yup.object().shape({
          firstName: Yup.string().required('First name is required'),

        })}
      onSubmit={item => { this.props.addRecordToTable(item)}}
      render={({ setFieldValue, values, errors, touched, isSubmitting }) =>
        <Form>
        <div>
          { touched.firstName && errors.firstName && <p>{errors.firstName}</p> }
          <Field type="input" name="firstName" placeholder="First name"/>
        </div>
        <input type="submit"></input>
      </Form>}
    />
    );
  }
}

export default UserForm;

输入firstName永远不会填充加载的数据。我该如何解决这个问题？

Answer 1

在enableReinitialized中将true设置为<Formik ... />

反应formik - 在http请求后填写表单输入数据

1 个答案: