React 显示本地化版本的错误消息答案

【问题标题】：React display localized version of error messageReact 显示本地化版本的错误消息
【发布时间】：2021-07-06 12:20:33
【问题描述】：

我正在使用 React 做前端，我正在使用 L10n 进行本地化。显示静态文本效果很好：

<input {...input} type="password" placeholder={strings.passwordPlaceholder} className="my-2 rounded-full" />

strings.passwordPlaceholder 将检查 l10n 文件并显示与所选语言对应的良好字符串。

我遇到的问题是当我尝试显示从 API 返回的错误消息时。在以下示例中，我想根据 API 的返回显示密码错误（法语中的 Mot de Passe 不正确）或用户被锁定（法语中的 Utilisateur verrouillé）。 JSON 返回：

{"message":"wrongPassword"}

或

{"message":"userLockedOut"}

我显示错误的命令行是：

{error && <span className="text-numerid-gray italic">{error.message}</span>}

只显示 wrongPassword 或 userLockedOut 而不调用 l10n 文件。我应该调用什么来代替 {error.message} 以及我应该如何配置 l10n 文件才能获得返回、调用 l10n 文件并显示好的文本？

谢谢

【问题讨论】：

我走得更远了 ``` {error && {strings.[error.message]}} `` ` 它适用于法语，但不适用于英语，并且出现 Identifier Expected 错误。

标签： json reactjs api error-handling localization

【解决方案1】：

对我有用的东西是在前端以以下方式存储带有错误的对象：

{
    wrong_password: {
        english: 'Wrong password',
        french: 'Mauvais mot de passe'
    },
    email_already_in_use: {
        english: 'Email already in use',
        french: 'Email déjà utilisé'
    },
}

这样，您可以从您的 API 发送任何错误消息，并以您想要的语言将其显示在前端。

例如，您的 API 将发送如下响应：

{
    error: 'wrong_password'
}

然后您可以通过以下方式获取您需要的文本：

import errorList from './path/to/your/errors/file';

const err = errorList[wrong_password][userLanguage];

console.log(err);

// output:
// english: Wrong password
// french: Mauvais mot de passe

如果错误按语言分类，您应该执行以下操作：

import frenchErrors from './path/to/french/errors';
import englishErrors from './path/to/english/errors';

function getError(lang, err) {
    let errList = englishErrors;
    if (lang === 'french') {
        errList = frenchErrors;
    }
    
    return errList[err];
}

const text = getError(userLanguage, err);

console.log(text);

// and you get the respective outcome

【讨论】：

它现在的设置方式，我有一个 en.js 和 fr.js 有英文和法文文本。我想将错误消息合并到这些文件中。
我已经发布了您需要的解决方案。
对不起，昨天累了。我现在明白了。但是，如果同一个 API 可以返回另一个错误消息（例如 User_Locked_Out），我该如何处理它。能否将错误信息放入变量中，调用该变量显示本地化的错误信息？
您应该维护您的 API 可以发回的所有错误的列表。此外，请确保在收到翻译错误时使用函数，以避免在您出错时应用崩溃。

【解决方案2】：

我为解决这个问题所做的是将更改错误行放在视图中，如下所示：

{error && <span className="text-numerid-gray italic">{strings[error.message]}</span>}

我只需要在 en.js 和 fr.js 中都输入 API 返回消息的条目，一切正常。

【讨论】：