React Final Form Field Arrays报错：validator is not a function 求解决方案

我之前也碰到过一模一样的问题，根源在于final-form的runFieldLevelValidation函数处理FieldArray组件的验证器时，没正确识别它的特殊结构——FieldArray的验证器是通过getValidator方法暴露的，而非普通Field那样直接是一个函数，这就导致代码尝试调用非函数对象，抛出了那个错误。

不用猴子补丁的话，你可以按这几个步骤来解决：

• 先检查版本兼容性
  final-form和final-form-field-arrays的版本必须严格匹配，版本不兼容很容易引发这类内部逻辑不匹配的问题。比如final-form v4.x系列要搭配final-form-field-arrays v3.x系列使用。
  先看看你package.json里的版本，如果不匹配，先卸载重装：

  npm uninstall final-form final-form-field-arrays
  npm install final-form@^4.20.10 final-form-field-arrays@^3.1.0
  

  这个版本组合是经过验证可以正常工作的，你也可以去官方仓库确认最新的兼容版本对。

• 正确处理FieldArray的验证逻辑
  如果你需要给数组字段加验证，优先用表单级别的验证器，这种方式更稳妥，也符合final-form的设计思路：

  const validateForm = values => {
    const errors = {};
    // 验证customers数组至少有一个元素
    if (!values.customers || values.customers.length === 0) {
      errors.customers = "必须添加至少一个客户";
    }
    // 其他字段的验证逻辑...
    return errors;
  };
  
  // 在Form组件中传入这个验证函数
  <Form
    onSubmit={yourSubmitHandler}
    validate={validateForm}
    initialValues={yourInitialValues}
  >
    {/* 你的普通Field和FieldArray组件 */}
    <Field name="name" component={RenderField} type="text" label="Name" />
    <FieldArray name="customers">
      {/* 这里渲染你的数组项 */}
    </FieldArray>
  </Form>
  

  如果你一定要用字段级别的验证，确保按照final-form-field-arrays的文档正确传递验证器，它会自动处理getValidator的逻辑：

  <FieldArray
    name="customers"
    validate={arrayValues => {
      if (arrayValues.length < 1) {
        return "请添加至少一个客户";
      }
    }}
  >
    {/* 数组项渲染 */}
  </FieldArray>
  

• 排查是否有全局验证逻辑干扰
  检查你的代码中有没有给所有字段添加通用验证的逻辑（比如高阶组件、表单全局配置），这些逻辑可能误将普通Field的验证逻辑套用到了FieldArray上，导致传递了无效的验证器。如果有，记得把FieldArray排除在外。

猴子补丁虽然能临时解决问题，但修改库的内部实现会带来维护风险——一旦库更新，你的补丁可能就失效了，还可能引发其他未知的bug，所以优先用上面这些正规方案解决。

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