FormControlProps.isInvalid？：布尔值 |未定义

Question

我正在尝试使用 React-Bootstrap 表单与 formik 和 Yup 来创建一个表单进行验证。我在无效道具中遇到打字稿错误，

Type 'string | undefined' is not assignable to type 'boolean | undefined'. Type 'string' is not assignable to type 'boolean undefined'.ts(2322)

。这是我的代码，

这是我的formik，

  const formik = useFormik({
    initialValues: {
      title: "",
      description: "",
      language: "",
      code: "",
    },
    validationSchema : PostSchema,
    onSubmit: (values: Post, { resetForm }) => {
      dispatch(createPost(values));
    },
  });

这是我的表格，

<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}
       isInvalid={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}
            isInvalid={formik.errors.desc}
          />
        </Form.Group>
        <Form.Control.Feedback type="invalid">
          {formik.errors.description}
        </Form.Control.Feedback>
        <Form.Group className="mt-3" controlId="language">
          <FormLabel>Select Language</FormLabel>
          <Form.Control
            as="select"
            onChange={formik.handleChange}
            isInvalid={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}
            isInvalid={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>

这是我的架构和界面，

export interface Post {
  _id?: string;
  title?: string;
  description?: string;
  language?: string;
  code?: string;
  userId?: string;
}

export const PostSchema = Yup.object().shape({
  title: Yup.string().required("Required"),
  description: Yup.string().required("Required"),
  language: Yup.string().required("Required"),
  code: Yup.string().required("Required"),
});

如果我注释掉

invalid

道具，一切正常，但验证消息没有出现，它基本上是在说，

Type 'string | undefined' is not assignable to type 'boolean | undefined'.ts(2322) FormControl.d.ts(18, 5): The expected type comes from property 'isInvalid' which is declared here on type 'IntrinsicAttributes & Omit<Pick<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "key" | keyof TextareaHTMLAttributes<...>> & { ...; }, BsPrefixProps<...> & FormControlProps> & BsPrefixProps<...> & FormControlProps & { ...; }'

Answer 1

isInvalid

期待

boolean

或

undefined

。

在您的代码中，您传入了可能的字符串值或未定义的值。

 <Form.Control
   type="text"
   placeholder="Enter title"
   value={formik.values.title}
   onChange={formik.handleChange}
   isInvalid={formik.errors.title}
 />

在您的代码中，

formik.errors.title

返回一个字符串值，或者在没有错误时返回未定义。这就是您收到打字稿错误的原因。

快速解决方案大概是这样的

isInvalid={formik.errors.title ? true: undefined}

Answer 2

为了类型兼容性，请用

Boolean

包装表达式。另外，最好检查一下

touched

状态：

isInvalid={Boolean(formik.touched.title && formik.errors.title)}