Question

我有这段代码。我想根据用户的语言环境添加错误消息，但如果字段填写错误，则会抛出错误

[缺少“en.login.emailRequiredError”翻译] [缺少“en.login.passRequiredError”翻译]

const schema = yup.object().shape({
  email: yup
      .string()
      .email(i18n.t('login.emailSpellError'))
      .required(i18n.t('login.emailRequiredError')),
  password: yup
      .string()
      .matches(/^((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15})$/i, i18n.t('login.passSpellError'))
      .required(i18n.t('login.passRequiredError')),
});

i18n.t（'login.passRequiredError'）在我将它放入一个render方法进行检查时工作正常，但它不适用于yup。有什么建议？提前致谢

Answer 1

Yup验证方法，

Start()

在渲染方法中，

// You define the key mentioned in the translation file, in my example 'Invalid email' and 'Required'  

    let ForgotPasswordSchema = yup.object().shape({
      email: yup.string().email('Invalid email').required('Required'),
    });

翻译文件

// As per your definition

isInvalid={(!!errors.email) && this.context.t(!!errors.email)}
invalidText={(errors.email) && this.context.t(errors.email)}

Answer 2

在您的架构中，替换：

.email(i18n.t('login.emailSpellError'))

使用

.email('login.emailSpellError')

然后在您的渲染方法中：

{t(`form.errors.${form.errors.email}`)}

这假定您的翻译文件具有这样的条目：

"form": { "errors": {"login": {"emailSpellError": "Your email is invalid"}}}}

这里的目标是将t（）方法移至您的render方法中，并在那里进行所有翻译。

Yup与i18n无法正常工作

2 个答案: