React-Bootstrap搭配Formik+Yup验证时isInvalid属性TS类型错误如何解决

• React-Bootstrap 中 Form.Control 组件的 isInvalid 属性要求传入 boolean | undefined 类型的值，而 Formik 的 errors 对象存储的是各字段的错误提示字符串，类型为 string | undefined，直接将 formik.errors.xxx 赋值给 isInvalid 会触发类型不匹配错误。
• 你的代码存在两处额外问题：一是 description 字段的错误引用写错，把 formik.errors.description 写成了 formik.errors.desc；二是 description 对应的 Form.Control.Feedback 组件放在了 Form.Group 外部，会导致错误提示无法正常显示。

1. 修正 isInvalid 的传值逻辑：需要同时判断字段是否被用户触碰过（使用 Formik 提供的 touched 对象）和是否存在错误，并用双感叹号 !! 将结果转为布尔值，同时给所有 Form.Control 加上 onBlur 事件用于更新触碰状态。
2. 修正 description 字段的错误引用和 Feedback 组件的位置。

修正后的核心代码示例 #

<Form onSubmit={formik.handleSubmit}>
  {/* 标题字段 */}
  <Form.Group controlId="title">
    <FormLabel>Title</FormLabel>
    <Form.Control
      type="text"
      placeholder="Enter title"
      value={formik.values.title}
      onChange={formik.handleChange}
      onBlur={formik.handleBlur}
      isInvalid={!!formik.touched.title && !!formik.errors.title}
    />
    <Form.Control.Feedback type="invalid">
      {formik.errors.title}
    </Form.Control.Feedback>
  </Form.Group>

  {/* 描述字段 */}
  <Form.Group className="pt-3" controlId="description">
    <FormLabel>Description</FormLabel>
    <Form.Control
      style={{ height: "100px" }}
      as="textarea"
      placeholder="Enter Code description"
      value={formik.values.description}
      onChange={formik.handleChange}
      onBlur={formik.handleBlur}
      isInvalid={!!formik.touched.description && !!formik.errors.description}
    />
    <Form.Control.Feedback type="invalid">
      {formik.errors.description}
    </Form.Control.Feedback>
  </Form.Group>

  {/* 语言选择字段 */}
  <Form.Group className="mt-3" controlId="language">
    <FormLabel>Select Language</FormLabel>
    <Form.Control
      as="select"
      onChange={formik.handleChange}
      onBlur={formik.handleBlur}
      isInvalid={!!formik.touched.language && !!formik.errors.language}
    >
      <option value="">Select Any language</option>
      {allLang.map((item) => {
        return (
          <option key={item._id} value={item.language}>
            {item.language}
          </option>
        );
      })}
    </Form.Control>
    <Form.Control.Feedback type="invalid">
      {formik.errors.language}
    </Form.Control.Feedback>
  </Form.Group>

  {/* 代码字段 */}
  <Form.Group className="pt-3 mb-3" controlId="code">
    <FormLabel>Code</FormLabel>
    <Form.Control
      as="textarea"
      style={{ height: "200px" }}
      placeholder="Enter Code"
      value={formik.values.code}
      onChange={formik.handleChange}
      onBlur={formik.handleBlur}
      isInvalid={!!formik.touched.code && !!formik.errors.code}
    />
    <Form.Control.Feedback type="invalid">
      {formik.errors.code}
    </Form.Control.Feedback>
  </Form.Group>

  <Button variant="primary" type="submit">
    Save Snippet
  </Button>
</Form>

可选优化 #

如果觉得每个字段重复写属性过于繁琐，可以使用 Formik 提供的 getFieldProps 方法简化代码：

<Form.Control
  {...formik.getFieldProps('title')}
  type="text"
  placeholder="Enter title"
  isInvalid={!!formik.touched.title && !!formik.errors.title}
/>

getFieldProps 会自动帮你注入 value、onChange、onBlur 三个属性，减少重复代码。

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