Formik - API 调用后更新初始值

Posted

技术标签:

【中文标题】Formik - API 调用后更新初始值【英文标题】:Formik - Update initial values after API call 【发布时间】:2020-01-31 23:53:39 【问题描述】:

我根据选择输入的变化从 API 调用中动态获取输入,但是当我尝试添加到 Formik 的初始值时,它总是给我一个错误...

Warning: A component is changing an uncontrolled input of type text to be controlled.

如果我将 enableReinitialize=true 设置为 Formik 也无济于事。

但是,如果我从本地 JSON 或对象生成输入,错误就会消失。

我在这里做错了什么......

https://codesandbox.io/s/test-dynamic-inputs-with-formik-xr9qg

表单提交正常。

【问题讨论】:

【参考方案1】:

如果有人遇到同样的问题,我刚刚找到了解决方案...

您必须在 TextInput 组件或您使用的任何类型的输入中设置 value=field.value || '' 才能解决此问题。

【讨论】:

谢谢!我一直在寻找这个答案。【参考方案2】:

我有一个复杂的动态表格,也遇到了这个问题。我建议将来调试此问题的任何人做一些事情:

    为您的 Field 组件设置值——就像上面的 Ruby 一样。 确保您的 Formik 组件具有唯一标识键。 跟踪和调试您的 initialValues 并确保所有字段都被考虑在内。您不必像 Ruby 那样设置字段值——只要您的 initialValues 对象考虑所有字段即可。但是,我的表单动态更改了 Field 组件——而 Ruby 的解决方案是唯一有效的解决方案。

如果您的表单不是动态的——我认为最好在实现 Ruby 的解决方案之前先检查您的 initialValues 对象。 Formik 应该为您处理这些值——这就是为什么它是一个如此棒的工具。

【讨论】:

我同意。如果表单不是动态的,则根本不需要。【参考方案3】:

最好使用enableReinitialize=true。这是官方的 Formik API。 可以查看this issue

【讨论】:

以上是关于Formik - API 调用后更新初始值的主要内容,如果未能解决你的问题,请参考以下文章

清除带有初始值 React 的 Formik 字段

当redux store中的值发生变化时,如何更新formik中的特定表单字段?

Null 被设置为 Formik 中空字符串的初始值,而反应原生中的 Yup 表单验证

如何使用 Formik 在 react-datepicker 中设置初始日期?

React Hooks - 将状态设置为初始状态

Formik 收音机不适用于嵌套对象值