如何填充 React Formik 表单？

Question

如何填充 React Formik 表单？例如，要编辑记录，首先将现有数据填充到字段中。

我试过类似的东西：

componentDidMount(){
   ...
   // get data from api call, 
   this.username = ...
   this.email = ...
}

render(){
  return(
    <Formik initialValues={{ username: this.username, email: this.email }}
  )
}

但表格总是空的。我想这也是因为在 componentDidMount 之前调用了 render。那么如何填充 Formik 表单呢？

Answer 1

对于此用例，您应该enableReinitialize在表单上进行设置。

https://jaredpalmer.com/formik/docs/api/formik#enablereinitialize-boolean

启用重新初始化？: boolean 默认为 false。

控制 Formik 是否应在 initialValues 更改时重置表单（使用深度相等）。

这将导致 Formik 在任何时候initialValues更改值时更改 -initialValues在启用此功能时，您应该注意确保其中的值的稳定性。

Formik 确实使用深度值相等来确定是否有变化，这意味着它将比较对象中字段的值而不是对象引用本身来确定是否有变化。

您应该使用在组件状态下存储来自远程源this.setState()的字段 - 在控制器实例上设置字段将阻止 React 重新渲染以响应字段更改。