Lingui：错误：对象作为 React 子对象无效（找到：带有键 {id} 的对象）答案

【问题标题】：Lingui: Error: Objects are not valid as a React child (found: object with keys {id})Lingui：错误：对象作为 React 子对象无效（找到：带有键 {id} 的对象）
【发布时间】：2021-01-18 08:19:47
【问题描述】：

根据the documentation，我们可以使用t 宏来代替i18n._() 调用。对应的宏变换示例：

import { t } from "@lingui/macro"
const message = t`Hello World`

// ↓ ↓ ↓ ↓ ↓ ↓

import { i18n } from "@lingui/core"
const message = i18n._(/*i18n*/{
  id: 'Hello World',
})

所以我应该可以写：

  <TextField label={t`Login`}/>

其中 TextField 是 Material UI 组件。

但这不起作用。相反，我得到一个运行时错误：

错误：对象作为 React 子对象无效（找到：带键的对象 {id})。

好像t 被转换为对象

{
  id: 'Login',
}

而不是 i18n._(...) 函数调用。

我在这里或project's pages 中找不到任何相关信息。

【问题讨论】：

我试过了，它对我有用。链接：codesandbox.io/s/nervous-liskov-xmghg?file=/src/App.js
谢谢斯瓦拉杰。就我而言，几乎没有区别。首先，我通过 withi18n 注入了 i18n。然后我使用了一些过时的版本和第三个 - 我以不同的方式初始化了 I18nProvider。请在下面查看我自己的回复。

标签： reactjs material-ui linguijs

【解决方案1】：

回答自己。

很难说出真正的原因，但在我根据 Sergio Moreno 提供的sandbox 更新代码后，它现在可以工作了。

基本上I18nProvider 应该以不同的方式初始化。具体来说：

曾经：

<I18nProvider language={language} catalogs={i18nCatalogs}>

变成：

<I18nProvider i18n={i18n}>

查看问题了解更多详情：https://github.com/lingui/js-lingui/issues/946

【讨论】：