Redux Form传自定义validate函数报Maximum update depth exceeded错误

错误原因 #

• 核心问题：你在JSX中直接定义内联箭头函数传给validate属性，组件每次渲染都会生成全新的函数引用。redux-form内部会对传入的校验配置做浅对比，发现validate引用变化就会重新执行校验、触发组件重渲染，重渲染又会生成新的validate函数引用，陷入无限循环，最终抛出最大更新深度超出的错误。
• 附带问题：你写的内联校验函数没有返回执行结果，val(value)的返回值被丢弃，即便解决循环问题校验逻辑也无法正常生效。

修复方法 #

不要在渲染阶段动态创建传给validate的函数，保证函数引用在非必要场景下保持稳定，同时正确返回校验结果。

场景1：依赖的自定义参数customProp会动态变化 #

在函数组件中使用useCallback包裹校验逻辑，仅在依赖项变化时才生成新的函数引用：

// 组件内定义稳定引用的校验函数
const validateActivityReason = useCallback((value) => {
  // 一定要return校验结果
  return requiredActivityReason(value, customProp);
}, [customProp]); // 仅当customProp变化时才更新函数引用

// JSX中直接传入稳定引用
<div className="label-input-container activity-reason-dropdown">
  <Dropdown
    dataAutomationId="identification-activity-reason"
    name="identificationActivityReason"
    label={<Translate id={isFromParameter ? 'updateParameter.updateReason' : 'commonComponentsLabels.activityReason'} />}
    values={options}
    disablePortal
    disableClearable
    mandatory
    validate={validateActivityReason}
    customDropdownClass="activity-dropdown-heigh-issue"
    placeholder="Select Reason"
  />
</div>

场景2：自定义参数customProp是固定常量 #

直接把校验函数定义在组件外部，整个应用生命周期内引用都不会变化：

// 组件作用域外定义，不会随渲染重新生成
const validateActivityReason = (value) => requiredActivityReason(value, customProp);

// 组件内直接传入即可
<Dropdown
  // 其余属性不变
  validate={validateActivityReason}
/>

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