Formik 字段中的空数据值会在控制台日志中引发警告

Question

我开始在控制台日志中注意到，数据为空的 Formik 字段出现多个警告。见下文..

    Warning: A component is changing a controlled input of type text to be uncontrolled. 
Input elements should not switch from controlled to uncontrolled (or vice versa). 
Decide between using a controlled or uncontrolled input element for the lifetime of the component.

数据为空的原因是因为数据库中的这些字段可以为空并且在前端是可选的。我在 Whosebug 上看到了一些建议，人们在其中放置了三元运算符 ?:"" 但这样做会导致每次用户移至表单上的下一个字段时用户输入都被覆盖。

例如

<Field
                        component={TextField}
                        label="Payment Method"
                        name="paymentMethod"
                        value={props.initialValues.paymentMethod? 
                               props.initialValues.paymentMethod : ""}
                        disabled
                        fullWidth={true}
                      />

目前唯一的解决方法是在我的 API 中与 MySQL 数据库交互。我使用 IFNULL() 和 return 空字符串或 0 表示空字段，但我真的不喜欢这种方法。

IFNULL(pmethod.payment_method_name, '') as paymentMethod,

关于如何处理这个问题有什么想法或建议吗？

Answer 1

在 Formik 中，它有道具 values。如果你在 value 中使用的 props 是 Formik 的道具，你可以像这样使用 props.values 和 nullish coalescing operator：

value={props.values.paymentMethod ?? ""}

Answer 2

感谢 Viet 的提示。我最终以不同的方式使用它。我根据我的 API 响应将空字符串值设置为 formik initialValues。所以，基本上我对 API 返回的值使用合并运算符，它填充了我的 Formik 初始值，这已经解决了这个问题。此外，现在可以理解为什么 React 会抛出警告，因为它无法确定 null 或 undefined 值以重新呈现它们。

Formik 字段中的空数据值会在控制台日志中引发警告

Null data values in Formik fields throws warnings in the console log

reactjs

formik