规范化使用 initialValues 设置的 redux-form 值答案

【问题标题】：Normalizing redux-form values set with initialValues规范化使用 initialValues 设置的 redux-form 值
【发布时间】：2016-11-28 13:48:40
【问题描述】：

当我使用 initialValues 设置我的表单值时，我希望运行规范化和异步验证。我什至尝试同时调度 blur 和 change 动作，但都不起作用：

dispatch(blur('userdata', 'user_zipcode', '3021LC'));

dispatch(change('userdata', 'user_zipcode', '3021LC'));

解决这个问题的正确方法是什么？

【问题讨论】：

【解决方案1】：

至于规范化，您使用非规范化数据进行初始化有点奇怪。我建议查看Value Lifecycle 并可能结合使用parse 和format 函数。

至于运行异步验证，同样奇怪的是，您可能正在使用无效数据进行初始化，但是您可以在表单组件中调用 this.props.asyncValidate() function 来触发异步验证。

这有帮助吗？

【讨论】：

这确实有帮助:)。这里的“问题”是这个表单预先填充了用户数据。我只想仔细检查（并规范化）数据。我在这里找到了一种标准化数据的方法：github.com/erikras/redux-form/issues/…。但是，异步验证不起作用......如果我是正确的，我应该能够在调度初始化操作后以我的装饰表单运行 this.props.asyncValidate() ，对吧？
它根本不运行 asyncValidator 函数......你能想到我可能错过的任何事情吗？

【解决方案2】：

我在使用 initialValues 时遇到了同样的问题，但没有将它们标准化：

使用format 而不是normalize 似乎可以解决问题，但是 format 实际上并没有像 normalize 那样更改您在商店中拥有的数据，如果您想这样做，那么使用两者可能是解决此问题的最佳方法？我不确定...

所以，这里有一个例子：

<Field component={MyCustomInputField} name="phone" format={normalizePhone} normalize={normalizePhone} label="Phone" type="tel" />

format是Value Lifecycle Hooks上的第一件事

希望这会有所帮助！

【讨论】：