react-intl 中 FormattedMessage ID 的解析变量

Question

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

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.

我错过了什么？

Answer 1

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

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

react-intl 中 FormattedMessage ID 的解析变量

Parsing variable for FormattedMessage ID in react-intl

reactjs

react-intl