Formik手动调用validateForm后then回调内errors为空异常问题

你遇到的问题核心是对validateForm的返回逻辑和Formik状态更新的异步性认知偏差：

• Formik 组件上下文中获取的errors是响应式状态变量，调用validateForm触发校验后，状态更新需要等待组件重渲染才会生效，你在then回调中直接取当前闭包缓存的旧errors变量，拿到的自然是校验前的空对象。
• validateForm执行后返回的 Promise 会直接 resolve 最新的校验错误结果，不需要依赖组件状态里的errors变量。

直接从then回调的入参中获取校验返回的错误对象即可，修改后的代码如下：

<Button type="button" disabled={isSubmitting} 
        onClick={() => {
            validateForm().then((newErrors) => {
                // 直接使用回调返回的最新错误对象
                if ('startDate' in newErrors || 'expirationDate' in newErrors) {
                    // 后续逻辑
                }    
            }); 
}}
/>

你配合Submit控件使用时校验功能正常，是因为Submit触发的校验流程会先完成状态更新再执行提交回调，回调里拿到的已经是重渲染后的最新errors状态，和手动调用validateForm的执行时序存在差异。

内容的提问来源于stack exchange，提问作者gene b.