i18n 反应返回 [object 对象]答案

【问题标题】：i18n react return [object object]i18n 反应返回 [object 对象]
【发布时间】：2021-09-22 10:38:35
【问题描述】：

我有一个像这样的对象：

{
 comment: "autogenerated"
 createdDate: "2021-09-21T14:32:47"
 id: 7831
 lastModifiedDate: "2021-09-21T14:32:47"
 media: "LETTER"
}

知道media 可以返回不同的值，例如：“LETTER”、“PHONE”、“EMAIL”。

我希望根据media 返回的值更改我的翻译

const renderMedia = (media: string) => {
   return (
    <>
      {t(`press.text`, {
        media: presentMedia(media),
      })}
    </>
   );
 };

presentMedia() 函数根据media 返回的值返回翻译

 const presentMedia = (media: string) => {
      switch (media) {
       case 'PHONE':
        return <span>t('press.media.phone')</span>;

       case 'LETTER':
         return <span>{t('press.media.letter')}</span>;

       case 'EMAIL':
           return <span>t('press.media.email')</span>;
      }
     };

i18n 文件：

 "press": {
   "text": "files {{media}}",
   "media": {
     "phone": " by phone",
     "letter": "bu letter",
     "email": "bu email"
   },

另一方面，presentMedia 函数返回 [object, Object]，而我想恢复 switch 中存在的翻译

如果我用一个简单的字符串 test 替换 {t('press.media.letter')} 它会显示

在函数中使用 i18n React 有问题吗？

可能有另一种解决方案可以给我同样的结果？

【问题讨论】：

如果您尝试答案，请告诉我

标签： reactjs internationalization react-i18next

【解决方案1】：

这里有一个带有示例的 CodeSanbox：https://codesandbox.io/s/cranky-allen-oujoc?file=/src/App.js

错误是：presetMedia 正在返回 [object Object]，因为您也在返回 。所以，它是一个 React 节点（或 [objectObject]）

我建议改变：

 const presentMedia = (media: string) => {
      switch (media) {
       case 'PHONE':
        return <span>{t('press.media.phone')}</span>;

       case 'LETTER':
         return <span>{t('press.media.letter')}</span>;

       case 'EMAIL':
           return <span>{t('press.media.email')}</span>;
      }
     };

到这里：

const presentMedia = (media: string) => {
  switch (media) {
    case 'PHONE':
      return t('press.media.phone');

    case 'LETTER':
      return t('press.media.letter');

    case 'EMAIL':
      return t('press.media.email');
  }
};

最后，如果可行，我建议更改为：

const presentMedia = (media: string) => t(`press.media.${media.toLowerCase()`);

【讨论】：

【解决方案2】：

这些情况不一样，其中2个缺少{}。修复它们以查看问题是否已解决。如果没有，请提供t 的代码。

       case 'PHONE':
        return <span>t('press.media.phone')</span>;

       case 'LETTER':
         return <span>{t('press.media.letter')}</span>;

       case 'EMAIL':
           return <span>t('press.media.email')</span>;

【讨论】：