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

Posted 2023-02-19

【中文标题】React-intl const <FormattedMessage /> 给出 [object object] 作为结果

【英文标题】：React-intl const <FormattedMessage /> is giving [object object] as result

【发布时间】：2019-02-24 15:46:32

【问题描述】：

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

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

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

【问题讨论】：

为什么要在输入标签的占位符中分配一个对象？它应该是 但不分配对象

代替图片放码

<FormattedMessage /> 将返回对象而不是字符串，placeholder 需要字符串

【参考方案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。