React Formik 输入表单字段时自动触发报错问题求助

1. 校验触发时机不符合预期 #

Formik默认开启validateOnChange、validateOnBlur配置，输入内容、输入框失焦时都会自动触发校验逻辑。你为每个Field都绑定了非空校验函数，所以只要输入第一个字符就会触发校验，出现非空报错。
修复方式：给Formik组件添加配置，关闭输入和失焦时的自动校验，仅保留提交时校验：

<Formik 
  onSubmit={ontNewSliderSubmit}
  validateOnChange={false}
  validateOnBlur={false}
>

2. Slider En Button Text字段错误判断逻辑错误 #

对应代码里的错误判断条件误用了其他字段的错误变量：

// 错误写法
{errors.sliderEnText && (
    <div className="invalid-feedback d-block">
        {errors.sliderEnButtonText}
    </div>
)}

判断条件写的是errors.sliderEnText，但实际要判断的是当前sliderEnButtonText字段的错误，逻辑混乱会导致异常报错。
修复方式：修改判断条件为对应字段的错误变量：

{errors.sliderEnButtonText && (
    <div className="invalid-feedback d-block">
        {errors.sliderEnButtonText}
    </div>
)}

3. 提交参数拼写错误 #

提交参数里取sliderArButtonLink字段值的时候拼写错误：

// 错误写法，最后一个字母l小写
slider_ar_button_link: values.sliderArButtonlink,

字段的name属性定义为sliderArButtonLink（最后一个字母L大写），拼写不一致会导致取值为undefined，触发运行时报错。
修复方式：统一拼写：

slider_ar_button_link: values.sliderArButtonLink,

完成以上三处修改即可解决你遇到的所有问题。

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