Я разрабатываю приложение, в котором пользователь хочет показать сообщение об ошибке на разных языках. Например, на странице регистрации, если пользователь вводит идентификатор электронной почты, который уже зарегистрирован, он будет отображать ошибку как «Идентификатор электронной почты уже зарегистрирован». Я получаю это сообщение об ошибке от API. Все сообщения об ошибках имеют разные коды. Я сомневаюсь, как перевести сообщение об ошибке с кодом, поступающим из API. На данный момент я использую приведенный ниже код, где я непосредственно дам сообщение об ошибке. Любой может помочь мне с этим. Заранее спасибо.
export function SignUp(props: any) {
const {
signupData, isRegd, dispatch,
} = props;
const [email, setEmail] = useState('');
const [fname, setFName] = useState('');
const [lname, setLName] = useState('');
const [password, setPassword] = useState('');
const [result, setResult] = useState(SignUp.result);
const [signupvalidated, setSignupValidated] = useState(false);
const settingResult = () => {
setResult(SignUp.result);
setTimeout(() => {
setResult(null);
dispatch(resetsignup());
}, 2000);
};
const signupHandler = (event: any) => {
const form = event.currentTarget;
const obj: any = serialize(form, { hash: true });
if (form.checkValidity()) {
dispatch(userRegistration(obj)).then((isSuccess: any) => {
if (isSuccess) {
settingResult();
}
});
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
event.stopPropagation();
}
setSignupValidated(true);
};
return (
<div className="signupFormData">
<h5 className={`${styles.mt30} ${styles.mb30} ${'text-center'}`}>{t('SignUpmodal.lblSgnmyFYONE')}</h5>
<Form id="signupForm" noValidate validated={signupvalidated} onSubmit={(ev: any) => signupHandler(ev)}>
{
(!isRegd && typeof result !== 'undefined' && result)
? map(result.msgs, (erList: any) => (
<Alert key={erList.code} variant="danger">{erList.msgText}</Alert>
))
: ''
}
{
(isRegd && result)
? (
<Alert key={isRegd} variant="success">
{t('Loginmodal.lblPrflRegstrSucs')}
!!!
</Alert>
)
: ''
}
<div className={`${styles.formClm2} ${styles.labelInline}`}>
<Form.Group>
<div className={styles.inlineGroup}>
<Form.Control required type="text" name="firstName" id="firstName" value={fname} onChange={(value: any) => { setFName(value.target.value); nameHandler(value); }} className={`${styles.formControl} ${fname.length > 0 ? styles.hasContent : ''}`} />
</div>
</Form.Group>
<Form.Group>
<div className={styles.inlineGroup}>
<Form.Control required type="text" name="lastName" id="lastName" value={lname} onChange={(value: any) => { setLName(value.target.value); nameHandler(value); }} className={`${styles.formControl} ${lname.length > 0 ? styles.hasContent : ''}`} />
</div>
</Form.Group>
</div>
<Form.Group>
<div className={styles.inlineGroup}>
<Form.Control required autoComplete="new-emailAddress" type="email" name="emailAddress" value={email} onChange={(value: any) => { setEmail(value.target.value); }} className={`${styles.formControl} ${email.length > 0 ? styles.hasContent : ''}`} />
<Form.Label>{t('SignUp.lblEmailID')}</Form.Label>
</div>
</Form.Group>
<Form.Group>
<div className={styles.inlineGroup}>
<Form.Control required type="password" name="profileInfo[password]" value={password} onChange={(value: any) => { setPassword(value.target.value); }} className={`${styles.formControl} ${password.length > 0 ? styles.hasContent : ''}`} />
<Form.Label>{t('SignUp.lblPassword')}</Form.Label>
</div>
</Form.Group>
<div className={styles.tabFooter}>
<Button type="submit" className={`${styles.btn} ${styles.btnContinue}`}>{t('SignUp.lblSgnUp')}</Button>
</div>
</div>
</Form>
</div>
);
}
//Language Change Code translation.json file:
"ErrorMsg": {
"60" : "Email address already exists"
}
}
"ErrorMsg": {
"60" : " Această adresă de e-mail a fost deja înregistrată."
}
}