使用打字稿的formik错误中的类型不匹配错误答案

【问题标题】：Type missmatch error in formik errors using typescript使用打字稿的formik错误中的类型不匹配错误
【发布时间】：2021-10-31 22:31:57
【问题描述】：

我有用于 formik 输入的自定义组件，如果存在，我会在其中呈现错误标签。
如果我像这样打印它：{errors[field.name]} 它可以工作
但是 {t(errors[field.name]?.toLocaleString())} 这不是。

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<...>)[]'.

【问题讨论】：

你能展示一下你是如何渲染InputField的吗？了解所有内容的来源会很有帮助
请分享InputFieldProps类型

标签： typescript formik react-i18next

【解决方案1】：

errors[field.name]?.toLocaleString() 中的 ? 表示：“如果属性 toLocaleString 不存在于 errors[field.name] 上，则返回 undefined”。然后它尝试将undefined 传递给t()，这超出了它的定义，这就是你看到错误的原因?。

但是，您可能不需要可选链接，因为它上面的 4 行您已经在检查属性 [field.name]。

删除? 应该可以修复它。试试t(errors[field.name].toLocaleString()) 告诉我它是否有效。

【讨论】：

其实我只是忘了删除'?'在这里有问题我会得到同样的错误没有它
好的，问题仍然与函数 t() 有关 - 您允许将与其接口不匹配的类型传递给它。确保你向其中传递了一个字符串，你应该没问题。
我知道它应该是传递给 t() 函数的字符串。它是 react-18next 库，但这个错误 [x] 不是字符串。我不知道如何投射或设置它的工作方式。

【解决方案2】：

只需使用 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

【讨论】：