代码之家 › 专栏 › 技术社区 › 1110

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

react-i18next formik typescript

1110 · 技术社区 · 3 年前

我有用于输入的自定义组件 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<...>)[]'.

0 回复 | 直到 3 年前

Ro Milton 3 年前

这个 ? 在…内 errors[field.name]?.toLocaleString() 意思是:“返回 undefined 如果属性 toLocaleString 上不存在 errors[field.name] ”。然后它试着通过 未定义 进入 t() ,这超出了它的定义,也是您看到错误的原因。

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

正在删除 ? 应该修复它。试试 t(errors[field.name].toLocaleString()) 让我知道它是否有效。

captain-yossarian from Ukraine 3 年前

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