Redux-form字段级校验结合React-intl国际化的问题排查

我之前也碰到过一模一样的问题，核心原因有两个：一是你当前的校验函数捕获了初始渲染时的intl实例，语言切换后无法获取最新的国际化上下文；二是Redux-form不会自动在语言切换时重新校验字段，导致旧的错误消息停留在store里。下面是具体的解决步骤：

1. 修改校验函数，获取最新的intl上下文 #

你之前的写法是提前把intl传入校验函数，这样函数就固定了初始的intl引用。其实Redux-form的校验函数支持接收第三个参数props，咱们可以利用这个特性，在校验时动态获取最新的intl：

// 改写校验函数，从props中取最新的intl
const required = (value, allValues, props) => {
  return value ? undefined : props.intl.formatMessage({ id: "Required" });
};

然后在Field组件里直接传入required即可，不用提前传参数：

<Field name="Label" component={renderField} validate={[required]} />

这样每次校验字段时，都会使用当前组件最新的intl props，保证错误消息能匹配当前语言。

2. 语言切换时触发重新校验 #

即使校验函数能获取最新的intl，Redux-form也不会自动在语言变化时重新校验字段。所以我们需要在语言切换时，主动触发表单的重新校验：

类组件写法 #

如果你的组件是类组件，可以在componentDidUpdate里监听intl的locale变化，然后调用Redux-form提供的校验方法：

componentDidUpdate(prevProps) {
  // 检测语言是否切换
  if (prevProps.intl.locale !== this.props.intl.locale) {
    // 重新校验整个表单，更新错误消息
    this.props.validateForm();
    // 如果你只想校验特定字段，可以用：
    // this.props.validateFields(['Label']);
  }
}

函数组件写法 #

如果是函数组件，用useEffect钩子监听locale变化：

import { useEffect } from 'react';

// 组件内部
useEffect(() => {
  // 语言切换时重新校验表单
  props.validateForm();
}, [props.intl.locale]);

为什么原来的写法会出问题？ #

你之前的validate={[required(this.props.intl)]}是在组件第一次渲染时就生成了校验函数，这个函数内部捕获了当时的intl实例。当语言切换后，组件的intl props更新了，但校验函数还是用的旧的intl，而且Redux-form没有触发重新校验，所以旧的错误消息不会更新，看起来就像字段状态丢失、错误消息消失了。

内容的提问来源于stack exchange，提问作者Masterlud