forms - React formik - 在http请求后用数据填充表单输入

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;

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

Answer 1

设置enableReinitialize至true在<Formik ... />