React-intl const <FormattedMessage /> 给出 [object object] 作为结果答案

【问题标题】：React-intl const <FormattedMessage /> is giving [object object] as resultReact-intl const <FormattedMessage /> 给出 [object object] 作为结果
【发布时间】：2019-02-24 15:46:32
【问题描述】：

我正在使用"react-intl": "^2.4.0" 和"react": "^16.2.0"。

我正在尝试将<FormattedMessage/> 标记的输出分配给一个常量，并将其放在输入标记占位符中。

预期的输出输入字段，其中包含相应语言的文本，但它在文本框中出现 [object object]。

【问题讨论】：

为什么要在输入标签的占位符中分配一个对象？它应该是但不分配对象
代替图片放码
<FormattedMessage /> 将返回对象而不是字符串，placeholder 需要字符串

标签： reactjs react-intl

【解决方案1】：

<FormattedMessage /> 是一个无法放置到 placeholder 的组件，它需要一个原始字符串。

import {injectIntl} from 'react-intl'; 

class TestComponent extends React.Component{
  render(){
    const { intl } = this.props;
    return (
        <input placeholder={intl.formatMessage({ id: "loginPage.username", defaultMessage: 'username'})}/>
    )
  }
}

export default injectIntl(TestComponent);

【讨论】：

最好说<FormattedMessage /> 是一个组件，它不能被放置到需要原始字符串的placeholder。
得到这个错误 "TypeError: Cannot read property 'formatMessage' of undefined" 然后我使用 import { FormattedMessage, injectIntl, formatMessage } from "react-intl";错误“TypeError：无法读取未定义的属性 'formatMessage'”
你必须从 formatMessage 获取 intl，一旦你从 injectIntl 包装你的课程，你就可以在 props 中看到 formatMessage。