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表单？

Answer 1

在这种情况下，您应该在表单上设置enableReinitialize。

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

enableReinitialize？：布尔值默认为false。

控制如果initialValues发生更改（使用深度相等），Formik是否应重置表单。

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

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

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

Answer 2

在您的状态下设置您的api调用的响应，然后在渲染器中从该状态获取数据，它将起作用

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 }}
  )
}

Answer 3

尝试使用setState

componentDidMount(){


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

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

如果您不想呈现空白表格，请保持状态天气数据是否到来，如果尚未出现，请显示加载程序

Answer 4

我不确定，但是尝试这样的事情：

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

  const userProfile: IProfile = {
    firstName: "First",
    lastName: "Last",
    email: "email@email.com"
  };

  return userProfile;
}

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

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

如何填充React Formik表单？

4 个答案: