我正在向用户显示登录屏幕。这个登录屏幕（或整个应用程序，公平地说）可以用不同的语言显示。
语言切换适用于除验证错误之外的所有 UI 组件。
目前，如果用户将电子邮件/密码字段留空，或输入无效的电子邮件地址，收到错误消息然后切换语言，错误消息不会更改为新语言。
经过大量的猜测和实验，我发现在单击“de”或“en”按钮两次后语言发生了变化，然后在输入中输入。
我一辈子都无法找出 useState 和 useEffect 钩子的正确组合，使验证消息在按下任一语言按钮后立即翻译。
以下代码：
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Formik, Field, Form, ErrorMessage } from 'formik'
import * as Yup from 'yup'
import { useTranslation } from 'react-i18next'
import { accountService, alertService } from '@/_services'
function Login({ history, location }) {
//'common' is defined in i18n.js under init's namespace ('ns:') option
//if that's not set, use useTranslation('common'), or whatever the name
//of the json files you use in the language-specific folders is
const { t, i18n } = useTranslation()
const [emailRequired, setEmailRequired] = useState(t('login.email_error_required'))
const [emailInvalid, setEmailInvalid] = useState(t('login.email_error_invalid'))
const [passwordRequired, setPasswordRequired] = useState(t('login.password_error_required'))
const [validationSchema, setvalidationSchema] = useState(
Yup.object().shape({
email: Yup.string().email(emailInvalid).required(emailRequired),
password: Yup.string().required(passwordRequired),
}),
)
useEffect(() => {})
const initialValues = {
email: '',
password: '',
}
const onSubmit = ({ email, password }, { setSubmitting }) => {
alertService.clear()
accountService
.login(email, password)
.then(() => {
const { from } = location.state || { from: { pathname: '/' } }
history.push(from)
})
.catch((error) => {
setSubmitting(false)
alertService.error(error)
})
}
return (
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit}>
{({ errors, touched, isSubmitting }) => (
<Form>
<h3 className="card-header">{t('login.page_title')}</h3>
<div className="card-body">
<div className="form-group">
<label>{t('login.email_input_label')}</label>
<Field name="email" type="text" className={'form-control' + (errors.email && touched.email ? ' is-invalid' : '')} />
<ErrorMessage name="email" component="div" className="invalid-feedback" />
</div>
<div className="form-group">
<label>{t('login.password_input_label')}</label>
<Field name="password" type="password" className={'form-control' + (errors.password && touched.password ? ' is-invalid' : '')} />
<ErrorMessage name="password" component="div" className="invalid-feedback" />
</div>
<div className="form-row">
<div className="form-group col">
<button type="submit" disabled={isSubmitting} className="btn btn-primary">
{isSubmitting && <span className="spinner-border spinner-border-sm mr-1"></span>}
{t('login.login_btn_label')}
</button>
<Link to="register" className="btn btn-link">
{t('login.register_btn_label')}
</Link>
<button
type="button"
onClick={() => {
i18n.changeLanguage('de')
setEmailRequired(t('login.email_error_required'))
setEmailInvalid(t('login.email_error_invalid'))
setPasswordRequired(t('login.password_error_required'))
setvalidationSchema(
Yup.object().shape({
email: Yup.string().email(emailInvalid).required(emailRequired),
password: Yup.string().required(passwordRequired),
}),
)
}}
>
de
</button>
<button
type="button"
onClick={() => {
i18n.changeLanguage('en')
setEmailRequired(t('login.email_error_required'))
setEmailInvalid(t('login.email_error_invalid'))
setPasswordRequired(t('login.password_error_required'))
setvalidationSchema(
Yup.object().shape({
email: Yup.string().email(emailInvalid).required(emailRequired),
password: Yup.string().required(passwordRequired),
}),
)
}}
>
en
</button>
</div>
<div className="form-group col text-right">
<Link to="forgot-password" className="btn btn-link pr-0">
{t('login.forgot_password_label')}
</Link>
</div>
</div>
</div>
</Form>
)}
</Formik>
)
}
export { Login }
我尝试过的事情及其结果：
1.)
我曾经完全没有使用useState，所以validationSchema是这样组成的：
const emailRequired = t('login.email_error_required');
const emailInvalid = t('login.email_error_invalid');
const passwordRequired = t('login.password_error_required');
const validationSchema = Yup.object().shape({
email: Yup.string().email(emailInvalid).required(emailRequired),
password: Yup.string().required(passwordRequired),
})
这导致在输入其中一个输入之前只需要单击“de”或“en”按钮，就会将错误消息更改为新的翻译。
2.)
我把语言更改按钮变成了提交类型的按钮：
<button
type="button"
onClick={() => {
i18n.changeLanguage('en')
}}
>
但这只是感觉不对。我无法想象那将是正确的解决方案。然而，它起作用了，因为它只是重新运行了“OnSubmit”功能......
3.)
将“validationSchema”和错误变量添加到 useState 和 useEffect 挂钩中的各种组合，希望它们中的任何一个都起作用，但它根本没有。
我想了解的是为什么 Formik 对象似乎将其内部组件与 useEffect 带来的更新“隔离”。为什么 React 没有看到验证错误的语言变化，但它所做的一切都是如此？
我还没有收到任何回复，但同时我自己弄明白了。
原来翻译键需要进入模式：
const validationSchema = Yup.object().shape({
email: Yup.string().email('login.email_error_invalid').required('login.email_error_required'),
password: Yup.string().required('login.password_error_required'),
})
然后错误消息需要是自定义组件。所以他们需要改变：
<ErrorMessage name="password" component="div" className="invalid-feedback" />
对此：
{errors.password && <div className="invalid-feedback">{t(errors.password)}</div>}
所以，对于电子邮件，整个事情看起来像：
<div className="form-group">
<label>{t('login.password_input_label')}</label>
<Field name="password" type="password" className={'form-control' + (errors.password && touched.password ? ' is-invalid' : '')} />
{errors.password && <div className="invalid-feedback">{t(errors.password)}</div>}
</div>
我不知道为什么这会有所不同，但希望它能在未来帮助其他人。
谢谢 op，它帮助我弄清楚了如何使翻译工作。
对我有用的方法是：
const LoginSchema = Yup.object().shape({
username: Yup.string().required('loginForm.required'),
password: Yup.string()
.min(6, 'loginForm.passwordShort')
.required('loginForm.required'),
});
但是现在提取不起作用，所以您必须在 .po 文件中手动添加这些键。
{errors.username && touched.username ? (
<IonItem
lines="none"
className={`${classes.Error} ion-margin-top ion-justify-content-center`}
>
{t({
id: errors.username,
})}
</IonItem>
) : null}
这种方法适用于 Yup + Lingui.js
Typescript 简单、干净、容易
// 在组件外
const getRegisterFormSchema = (t: TFunction<"translations", undefined, "translations">) => {
return object({
firstName: string().required().label(t('PageRegister.labelFirstName')),
})
}
const PageRegister = () => {
const {t} = useTranslation()
const scheme = useMemo(() => getRegisterFormSchema(t), [t]);
...
const methods = useForm<RegisterFormValues>({
resolver: yupResolver(scheme),
defaultValues: getInitialValues(),
});
const {trigger} = methods; // Extract all you need
useEffect(() => {
// translate validation messages immediately, (wrap task to microtask always)
setTimeout(trigger, 0);
}, [t]);
}