使用Formik动态输入时触发validateOnChange未定义错误

以下是针对你遇到的问题的具体修复方案：

1. 确保FieldArray的name与Formik state数组字段完全匹配 #

检查FieldArray组件的name属性，必须和你Formik state中存储船只信息的数组字段完全一致（比如你的数组是vessels，就不能写成vessel或者其他层级错误的路径）。示例：

<FieldArray name="vessels" render={({ fields }) => { /* 渲染逻辑 */ }} />

2. 同步setNoOfVessels与vessels数组的长度 #

错误的核心原因大概率是setNoOfVessels变化时，vessels数组的长度没有同步调整，导致FieldArray尝试访问不存在的数组索引。用useEffect监听setNoOfVessels的变化，动态调整数组长度：

import { useEffect } from 'react';
import { useFormikContext } from 'formik';

// 在表单组件内部
const { values, setFieldValue } = useFormikContext();

useEffect(() => {
  const targetCount = Number(values.setNoOfVessels);
  const currentCount = values.vessels.length;

  if (targetCount > currentCount) {
    // 新增空的船只对象
    const newVessels = [...values.vessels];
    for (let i = currentCount; i < targetCount; i++) {
      newVessels.push({ vesselName: '' });
    }
    setFieldValue('vessels', newVessels);
  } else if (targetCount < currentCount) {
    // 截断数组到目标长度
    setFieldValue('vessels', values.vessels.slice(0, targetCount));
  }
}, [values.setNoOfVessels, values.vessels, setFieldValue]);

3. 使用FieldArray提供的fields对象渲染输入框 #

在FieldArray的render回调中，必须使用它提供的fields对象来遍历生成输入框，不要手动维护索引，避免索引不匹配的问题：

<FieldArray name="vessels">
  {({ fields }) => (
    <div>
      {fields.map((fieldPath, index) => (
        <div key={fields.id(index)}>
          <label>Vessel {index + 1}</label>
          <Field
            name={`${fieldPath}.vesselName`}
            type="text"
            placeholder="Enter vessel name"
          />
        </div>
      ))}
    </div>
  )}
</FieldArray>

4. 检查validateOnChange配置 #

确保Formik组件或Field组件的validateOnChange属性没有被错误设置为undefined。如果不需要实时验证，可以明确设置为false，但不要留空或赋值为无效值：

// Formik组件配置示例
<Formik
  initialValues={initialValues}
  onSubmit={handleSubmit}
  validateOnChange={true} // 明确设置为true/false，不要用undefined
>
  {/* 表单内容 */}
</Formik>

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