使用 i18next 翻译挂钩获取错误消息

Question

所以我有一个可以正常工作的表单，对于错误消息，我创建了一个架构文件，其中包含这样定义的错误

export const dataInputCreateSchema = yupObject({
    company: yup.object().required('This field is required').nullable
  })

在我的组件中，我正在像这样 const { t } = useTranslation('common') 初始化 i18next 翻译变量。至于显示错误消息，以防万一用户触摸文本框但未写任何内容，则将显示必填字段错误，其工作方式如下

const companyFieldError = _.get(errors,'company', '');

_.get 是一个 lodash 方法，它接受一个对象、路径和默认值。

我需要知道如何将 common.json 文件中定义的翻译传递给 companyFieldError？ common.json 中的翻译类似于

"errorMessages": { 
     "requiredField": "This is required Field"
  }

我不想丢弃我的架构文件，但我想在那里提供密钥，并且必须翻译该密钥。有办法吗？

Answer 1

以下是我将进行的一些更改以支持翻译错误。

export const dataInputCreateSchema = yupObject({
    company: yup.object().required('errorMessages.requiredField').nullable
  })

const message = _.get(errors,'company', '');
const companyFieldError = t(message);

Use i18next translation hook for error messages