我们应该在表单状态中存储原始值还是解析值

Question

简介：

• 我们在 react 中使用 formik 或 final-form 作为表单管理器
• 我们从 API 获取实体
• 我们需要映射该实体以编辑表单值

案例一：

• 实体具有 ISO 日期属性
• 我们使用一个日期选择器，它的 onChange 返回一个 JS 日期对象

我们应该在表单状态中存储什么：ISO 日期（字符串）或 JS 日期（对象）？

如果我们存储 ISO 日期，则必须在 onChange 处理程序中进行解析。

案例 2：

• 实体具有布尔属性
• 我们使用 select 元素，其 onChange 返回一个字符串

我们应该在表单状态中存储什么：true（布尔）或“true”（字符串）？

---

一般问题是这样的：表单状态中存储什么？

使用时可以解析的原始 onChange 值？

或者最好确保日期选择器始终返回 ISO 日期或未定义，布尔字段始终返回布尔或未定义等。

Answer 1

案例 1： 我存储了所有日期，如 JS 日期，如果需要，我将转换为 iso。
案例二： 布尔(onChange())

Answer 2

我认为这真的没那么重要。使用我的库redux-form 和final-form，有parse/format 函数来管理表单状态的转换。您可以使用这些，然后不必在提交时对其进行转换，或者将其保留在您的输入组件想要的结构中，直到提交然后再进行转换。我想后者在技术上会更快，因为每次更改都不需要两次转换。

我经常使用react-rte，一个所见即所得的编辑器，并在每次按键时将原始格式转换为表单状态的markdown，而且速度非常快，所以......我认为这取决于你觉得更合适的方式。 ⚖️