即使在使用injectIntl​​（React-Intl）包装组件并得到错误之后，FormattedMessage（react-Intl）仍返回[对象对象]

Question

FormattedMessage返回一个组件（用span标记包裹），我们不能在选项占位符中使用它，因此我调整了IntlProvider的配置以返回没有span标记的格式化消息。首先是IntlProvider配置：

import React from 'react';
import {
  FormattedMessage,
  IntlProvider,
} from 'react-intl';

import enUSMessages from 'core/l10n/messages/en-US.json';

// This module does two things:
// 1. It provides an abstraction for how localization is done, decoupling the app from the
//    specific implementation, e.g. if we swapped out react-intl for something else, we'd just
//    need to change this file.
// 2. It enforces types, i.e. it will cause compilation to fail if you use a message ID not present
//    in the l10n json file.

export type L10nMessages = typeof enUSMessages;

export interface L10nProviderProps extends IntlProvider.Props {
  messages: L10nMessages;
}
export const L10nProvider: React.SFC<L10nProviderProps> = props => {
  return <IntlProvider textComponent={React.Fragment} {...props} />;
};

export interface LocalizedMessageProps extends FormattedMessage.Props {
  id: keyof L10nMessages;
}
export const LocalizedMessage: React.SFC<LocalizedMessageProps> = props => {
  return <FormattedMessage {...props} />;
};

我看到了几个相同的问题，并且建议我用injectIntl​​（React-Intl）包装该组件以注入原始字符串，尽管它给了我这个错误，并附带了屏幕截图。

为更好地解释该问题，以下是组件的更多详细信息。

这是contactContainer组件：

export class ContactContainer extends React.Component<ContactContainerProps, ContactContainerState> {  


  constructor(props: ContactContainerProps) {
    super(props);
    this.state = this.getInitialState();
  }

  getInitialState() {
    const me = (this.props.account.me)
      ? this.props.account.me
      : emptyProfile;

    const contactForm: OvationsPortalApi.Types.ContactForm = {
      firstName: me.firstName || '',
      lastName: me.lastName || '',
      email: me.preferredEmail || '',
      phone: me.phoneNumber || '',
      contactMethod: me.preferredContactMethod || OvationsApi.Enums.NotificationChannelType.None,
      questionCategory: '',
      message: '',
    };


  }

  render() {
    return (
      <Container className="py-4">

                    <Col md={6}>
                      <div className="mb-3">
                        <Label for={elements.contactUs.id.contactMethod}>
                          <LocalizedMessage id="best_contact_method" />
                        </Label>
                        <Input
                          type="select"
                          id={elements.contactUs.id.contactMethod}
                          name="contactMethod"
                          required
                          onChange={this.onInputChange}
                        >
                          <option value=""><LocalizedMessage id="please_select" /></option>
                          {Object.keys(ContactMethods).map(key => (
                          <option key={key} value={ContactMethods[key]}>
                            {ContactMethods[key]}
                          </option>
                        ))}
                        </Input>

      </Container>
    );
  }
}

export default connect(/* istanbul ignore next */state => state)
(withData(contactLoader)(injectIntl(ContactContainer)));

这是containerProps组件：

import S from 'redux-modules/definitions/RootState';
import { Dispatch } from 'react-redux';
import { RouteComponentProps } from 'react-router';

interface ContainerProps<P = {}> extends RouteComponentProps<P> {}
interface ContainerProps<P = {}> extends S {}
interface ContainerProps<P = {}> {
  dispatch: Dispatch<S>;
}

export type ProgramContainerProps = ContainerProps<{ clientId: string; programId?: string; }>;

export default ContainerProps;

这是formattedMessage id的键/值对：

{
  "please_select": "Please select",
  "question_category_required": "Question category is required.",
  "message": "Message",
  "message_required": "Message is required.",
  "submitting": "Submitting..."
}

请看看并提出良好的解决方案。谢谢您的宝贵时间！