JS语法问题：页面显示[object Object]而非FormattedMessage对应标签名如何解决

错误原因 #

你将React组件直接嵌入了字符串模板中。<FormattedMessage id="success.label.name" />本质是React组件对象，不是纯文本内容，当它被放到模板字符串的${}插值位时，JS会自动调用对象的toString()方法做隐式转换，最终输出就是你看到的[object Object]。

解决方案 #

分两种场景选择合适的写法：

• 如果你是在JSX中直接渲染内容，直接用JSX语法拼接即可，不需要套模板字符串：

<>
  The success message is {(firstValue || secondValue) ? <FormattedMessage id="success.label.name" /> : '-'}
</>

• 如果你确实需要先拿到格式化后的文本再做后续处理，可以调用react-intl提供的useIntl hook获取纯文本内容：

import { useIntl } from 'react-intl';

// 组件内部逻辑
const intl = useIntl();
const successLabel = (firstValue || secondValue) ? intl.formatMessage({ id: 'success.label.name' }) : '-';
const finalContent = `The success message is ${successLabel}`;

内容的提问来源于stack exchange，提问作者MartinTravis