时间戳

首页 > 解决方案 > 带有 defaultMessage 的 FormattedMessage 在控制台上显示错误

reactjs - 带有 defaultMessage 的 FormattedMessage 在控制台上显示错误

问题描述

我正在使用的应用程序可以选择为特定表单添加自定义字段，而这些字段不支持国际化。然而，由于我们项目中的组件，即使在添加后defaultMessage，FormattedMessage我们也会收到以下错误：

[React Intl] Missing message: "Custom Field #01" for locale: "en", using default message as fallback.

下面是我们的 BaseInput 是如何实现的。

class BaseInput extends Component {
  render() {
    let { id, style, label, required, errorMessage } = this.props;
    let errorClass = errorMessage ? "text-field-error" : "";

    return (
      <div className={errorClass} style={style}>
        <label
          id={`${id}_label`}
          name={`${id}_label`}
          className="ui-outputlabel"
        >
          <FormattedMessage id={label} defaultMessage={label} />
        </label>
        {required && <span className="wms-required-field"> *</span>}
        {this.generateInput()}
        {errorMessage && (
          <div className={"ui-message-error ui-widget ui-corner-all"}>
            <span id={`${id}_error`} className={"ui-message-error-detail"}>
              <FormattedMessage id={errorMessage} />
            </span>
          </div>
        )}
      </div>
    );
  }
}

我知道 json 没有给定 id 的翻译。我遇到的问题是控制台上的错误消息，即使添加了 defaultMessage。有没有人对如何解决这个问题有任何建议？

提前致谢

标签： reactjsreact-intl

解决方案

您可以通过实现提供程序的处理程序来防止丢失的消息在控制台中显示为错误onError。这将覆盖写入控制台的默认行为。您可以选择吞下错误。

<IntlProvider locale={locale} messages={messages} onError={handleTranslationError}>
  ...
</IntlProvider>

处理程序

const handleTranslationError = err => {
  // swallow error
};

推荐阅读