Kre*_*ylo 1 internationalization reactjs yup formik
我正在向用户显示登录屏幕。该登录屏幕（或者公平地说，整个应用程序）可以以不同的语言显示。
语言切换适用于除验证错误之外的所有 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>
我不知道为什么这会产生影响，但希望它将来能对其他人有所帮助。
| 归档时间： |
|
| 查看次数： |
7195 次 |
| 最近记录： |