使用typescript在formik错误中键入不匹配错误

vltsax25 于 2023-05-01 发布在 TypeScript

关注(0)|答案(4)|浏览(136)

我有自定义组件的输入formik和它里面我呈现错误标签，如果存在。
如果我把它打印成：{errors[field.name]}它工作
但是{t（errors[ www.example.com ]？.toLocaleString（））} this doesn't.

import { FieldProps, FormikErrors } from "formik";
import { useTranslation } from "react-i18next";

const InputField: React.FC<InputFieldProps & FieldProps> = ({
  field,
  form: { touched, errors },
  type,
  label,
  ...props
}) => {
  const { t } = useTranslation();
  
  return (
    <div>
      <label
        htmlFor={field.name}>
        {label}
      </label>
      <input
        type={type}
        {...field}
        {...props}/>
      {touched[field.name] && errors[field.name] && (
        <div>
          <p>
            {errors[field.name]}
            {t(errors[field.name])} <---- this does not work
          </p>
        </div>
      )}
    </div>
  );
};

export default InputField;

我收到错误：

Argument of type 'string | FormikErrors<any> | string[] | FormikErrors<any>[] | undefined' is not assignable to parameter of type 'TemplateStringsArray | Normalize<{test: 'test'}> | (TemplateStringsArray | Normalize<...>)[]'.

typescript

来源：https://stackoverflow.com/questions/69791071/type-missmatch-error-in-formik-errors-using-typescript

4条答案

按热度按时间

ffdz8vbo1#

useFormik()出现了这个问题，我能够安全地将错误转换为这样

{formik.errors.fieldName ? <div>{formik.errors.fieldName as string}</div> : null}

赞(0）回复(0）举报 2023-05-01

7gyucuyw2#

errors[field.name]?.toLocaleString()中的?表示：如果errors[field.name]上不存在toLocaleString属性，则返回undefined。然后，它尝试将undefined传递到t()，这超出了它的定义，这就是为什么您会看到错误😉。
但是，您可能不需要可选的链接，因为在它上面的4行中，您已经在检查属性[field.name]。
删除?应该可以修复它。试试t(errors[field.name].toLocaleString())，让我知道它是否有效。

赞(0）回复(0）举报 2023-05-01

6uxekuva3#

只需使用typeof errors[field.name] === 'string'来确保typescript是一个字符串。

import React from 'react'
import { FieldProps, FormikErrors } from "formik";
import { useTranslation } from "react-i18next";

type InputFieldProps = any
const InputField: React.FC<InputFieldProps & FieldProps> = ({
  field,
  form: { touched, errors },
  type,
  label,
  ...props
}) => {
  const { t } = useTranslation();

  return (
    <div>
      <label
        htmlFor={field.name}>
        {label}
      </label>
      <input
        type={type}
        {...field}
        {...props} />
      {touched[field.name] && typeof errors[field.name] === 'string' && (
        <div>
          <p>
            {errors[field.name]}
            {t(errors[field.name])}
          </p>
        </div>
      )}
    </div>
  );
};

export default InputField;

Playground

赞(0）回复(0）举报 2023-05-01

42fyovps4#

这是我如何解决它我得到同样的错误在formik与mui图书馆

{errors?.fieldName && typeof errors.fieldName=== "string" && (
                    <Typography component={'div'} fontSize={12} color={'red'}>
                      {errors.fieldName}
                    </Typography>)}

赞(0）回复(0）举报 2023-05-01

我来回答

使用typescript在formik错误中键入不匹配错误

4条答案

相关问题

热门标签

最新问答