Formik与react-bootstrap：表单提交后错误反馈不更新如何处理？

我用Formik和react-bootstrap开发登录表单，提交时后端返回验证错误，用setErrors更新表单错误反馈，但反馈元素没更新，输入框也不显示红色错误样式。相关代码如下：

import React from 'react';
import { Formik, Field, ErrorMessage, useFormik } from 'formik';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import Button from 'react-bootstrap/Button';

const LoginForm = () => {

  return (
    <Formik
      initialValues = {{ userid: '', password: ''}}
      onSubmit = {(values, { setSubmitting, setErrors }) => {
        console.log("Formsub: " + JSON.stringify(values, null, 2));
        setErrors({userid: 'invalid login.'});
        setSubmitting(false);
      }}
    >
      {({ 
        handleSubmit,
        handleChange,
        handleBlur,
        isSubmitting,
        values,
        touched,
        isValid,
        errors,
      }) => (
        <Form onSubmit={handleSubmit}>
        Errors: {errors.userid}
        <Row className="mb-3">
          <Form.Group md="4" controlId="validationUserid">
            <Form.Label>Userid:</Form.Label>
            <Form.Control type="text" name="userid" 
              onChange={handleChange} value={values.userid} 
              isValid={touched.userid && !errors.userid}
            />
            <Form.Control.Feedback type="invalid">{errors.userid}</Form.Control.Feedback>
          </Form.Group>
        </Row>
        <Button type="submit" disabled={isSubmitting}>Submit form</Button>
      </Form>
      )}
    </Formik>
  );
}

export default LoginForm;

问题根源 #

你的代码里有两个核心问题：

1. 字段未标记为touched：react-bootstrap的错误样式、反馈显示依赖字段的touched状态，你只设置了errors但touched.userid还是false，导致样式和反馈都不触发。
2. 错误状态属性用反了：当前用的isValid是标记输入框为「有效」状态，但你需要的是显示「无效」样式，应该用isInvalid属性。

修复步骤 #

1. 替换isValid为isInvalid：给Form.Control添加isInvalid={touched.userid && !!errors.userid}，当字段被触碰且存在错误时，自动显示红色错误样式。
2. 确保字段被标记为touched：可以在提交时手动调用setTouched标记字段，或者给Form.Control绑定handleBlur事件，用户点击输入框外时自动标记。

修复后的完整代码 #

import React from 'react';
import { Formik } from 'formik';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import Button from 'react-bootstrap/Button';

const LoginForm = () => {
  return (
    <Formik
      initialValues={{ userid: '', password: '' }}
      onSubmit={(values, { setSubmitting, setErrors, setTouched }) => {
        console.log("Formsub: " + JSON.stringify(values, null, 2));
        // 设置错误同时标记字段为已触碰
        setErrors({ userid: 'invalid login.' });
        setTouched({ userid: true });
        setSubmitting(false);
      }}
    >
      {({
        handleSubmit,
        handleChange,
        handleBlur,
        isSubmitting,
        values,
        touched,
        errors,
      }) => (
        <Form onSubmit={handleSubmit}>
          Errors: {errors.userid}
          <Row className="mb-3">
            <Form.Group md="4" controlId="validationUserid">
              <Form.Label>Userid:</Form.Label>
              <Form.Control 
                type="text" 
                name="userid" 
                onChange={handleChange} 
                onBlur={handleBlur} // 绑定blur事件，自动标记字段为已触碰
                value={values.userid} 
                isInvalid={touched.userid && !!errors.userid} // 标记无效状态
              />
              <Form.Control.Feedback type="invalid">{errors.userid}</Form.Control.Feedback>
            </Form.Group>
          </Row>
          <Button type="submit" disabled={isSubmitting}>Submit form</Button>
        </Form>
      )}
    </Formik>
  );
}

export default LoginForm;

额外说明 #

• 不需要手动触发表单刷新，Formik的setErrors和setTouched会自动更新状态并触发组件重渲染，只要状态关联正确就会生效。
• 绑定handleBlur是为了让用户操作输入框后自动标记状态，提交时手动调用setTouched是确保即使用户没碰输入框就提交，也能显示错误反馈。

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