带有默认消息的格式化消息在控制台上显示错误

Question

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

[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 的翻译。我遇到的问题是控制台上的错误消息，即使添加默认消息也是如此。有人对如何解决这个问题有任何建议吗？

提前致谢

Answer 1

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

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

处理器

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

Answer 2

这是因为 json 没有对道具中给出的id进行翻译。只能翻译IntlProvider中定义和提供的翻译，否则将显示默认消息。