Formik-API调用后更新初始值

Question

我基于选择输入的更改从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

尽管该表单提交很好。

Answer 1

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

Answer 2

如果有人遇到相同的问题，我刚刚找到了解决方法...

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

Answer 3

我有一个复杂，动态的表格，也遇到了这个问题。对于以后调试此问题的任何人，我都建议您做一些事情：

1. 为您的Field组件设置值-就像上面的Ruby一样。
2. 确保您的Formik组件具有唯一标识密钥。
3. 跟踪并调试您的initialValues，并确保已考虑所有字段。您不必像Ruby那样设置字段值-只要您的initialValues对象说明了所有字段。但是，我的表单动态更改了Field组件-Ruby的解决方案是唯一可行的解​​决方案。

如果您的表单不是动态表单-我认为最好在实施Ruby解决方案之前先检查您的initialValues对象。 Formik应该为您照顾这些价值-这就是为什么它是如此出色的工具。