如何在Formik的FieldArray中使用setErrors设置数组元素错误？

问题场景 #

你的表单初始值结构如下：

const initialValues = {
  ranges: [
    { fromDate: '', endDate: '' },
    { fromDate: '', endDate: '' },
    { fromDate: '', endDate: '' }
  ]
};

需要检查日期区间是否存在重叠，并在FieldArray中通过数组索引给对应字段设置错误，但直接使用setErrors({ranges[someIndex].endDate : "ERR"})会报错。

解决方案 #

1. 使用setFieldError（推荐） #

Formik提供的setFieldError方法支持直接传入字段路径字符串，完美适配数组索引的场景，无需手动构建嵌套对象：

// someIndex为目标数组元素的索引
setFieldError(`ranges[${someIndex}].endDate`, "日期区间存在重叠");

该方法会自动处理表单的嵌套结构，直接定位到指定索引的字段并设置错误信息，是最简洁的实现方式。

2. 手动构建嵌套错误对象（适配setErrors） #

如果必须使用setErrors，需要构建与表单结构匹配的嵌套错误对象，避免用路径字符串作为键。步骤如下：

// 获取当前表单的错误状态
const currentErrors = formik.errors;
// 构建新的错误对象，保留原有错误并确保ranges数组结构正确
const updatedErrors = {
  ...currentErrors,
  ranges: [...(currentErrors.ranges || Array.from({ length: formik.values.ranges.length }, () => ({})))]
};
// 给指定索引的endDate字段设置错误
updatedErrors.ranges[someIndex] = {
  ...updatedErrors.ranges[someIndex],
  endDate: "日期区间存在重叠"
};
// 应用更新后的错误
setErrors(updatedErrors);

这种方式适合需要批量修改多个错误的场景，需注意维护数组的长度和结构，避免覆盖其他字段的错误信息。

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