如何填充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 }}
  )
}

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

- Jason

---

请查看我的另一个答案。请点击此链接：https://stackoverflow.com/a/62886732/1812371 - Celso Jr

Answer 1

针对这个用例，您应该在表单上设置 enableReinitialize。 https://jaredpalmer.com/formik/docs/api/formik#enablereinitialize-boolean “enableReinitialize?”: 布尔值，默认为false。控制Formik是否应该重置表单，如果initialValues发生更改（使用深度相等）。

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

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

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

- Dan

---

你能解释一下这个吗：“在控制器实例上设置字段将防止React对字段更改作出重新渲染的响应。” - Trees4theForest

React不了解类组件的实例属性。如果这些属性发生变化，React就不会知道再次调用render()方法。这就是为什么您必须在类组件中使用setState()来触发重新渲染以响应本地状态更改的原因。 - Dan

Answer 2

将您的API调用响应设置为状态值，在render中从状态值获取数据即可正常工作。

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

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

- Milenko

Answer 3

尝试使用setState

componentDidMount(){


   this.setState({
    username...
  })
}

因此，当状态更新时，它将使用数据呈现表单

如果您不想呈现空表单，则保持状态，无论数据是否到来，并在尚未到来时显示加载器

- Rahul Rana

Answer 4

我不确定，但可以尝试这样做：

...
function getData() {
  console.log("Called only once!");

  const userProfile: IProfile = {
    firstName: "First",
    lastName: "Last",
    email: "[e-mail]"
  };

  return userProfile;
}

return (
  <Formik
    initialValues={getData()}
...

更多内容请查看：https://stackblitz.com/edit/react-ts-bhk3dn?file=index.tsx

- Celso Jr