react-intl 中 FormattedMessage ID 的解析变量答案

【问题标题】：Parsing variable for FormattedMessage ID in react-intlreact-intl 中 FormattedMessage ID 的解析变量
【发布时间】：2021-12-06 07:46:36
【问题描述】：

我有一堆错误消息被设置为状态变量，如下所示：

if (err.message === "Invalid code or auth state for the user.") {
    this.setState({
        errorMessage: "sms.error.incorrect",
        goodCode: false,
    });
} else if (
    err.message ===
    "Invalid session for the user, session is expired."
) {
    this.setState({
        errorMessage: "sms.error.expired",
        goodCode: false,
    });
} else {
    this.setState({
        errorMessage: "sms.error.unknown_error",
        goodCode: false,
    });
}

在渲染部分，我尝试将errorMessage 字符串作为ID 传递给FormattedMessage，但它不会解析它。

<FormattedMessage id="{this.state.errorMessage}" />

它会抛出以下错误：

Error: [@formatjs/intl Error MISSING_TRANSLATION] Missing message: "{this.state.errorMessage}" for locale "de", using id as fallback.

我错过了什么？

【问题讨论】：

标签： reactjs react-intl

【解决方案1】：

您将字符串"{this.state.errorMessage}" 传递给不存在的id，您可能想要删除引号：

<FormattedMessage id={this.state.errorMessage} />

【讨论】：