reactjs - 使用 i18next 翻译钩子获取错误消息

Question

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

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

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

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

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

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

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

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

Answer 1

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

1. 使用模式定义中的消息。

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

2. 使用消息获取翻译文本。

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