如何在 React 应用程序中迭代 i18n 对象数组？

Question

我在我的 React 应用程序中使用 i18n 包来翻译一些文本。但是我无法遍历作为我的翻译数据的对象数组。

我想遍历 socials 数组并将其显示在我的模板中。但是当我这样做时，它说：socials.map is not a function

这是我的翻译 json 文件：

{
  "socials": [
  {
    "name": "Github",
    "url": "#"
  },
  {
    "name": "Twitter",
    "url": "#"
  },
  {
    "name": "Linkedin",
    "url": "#"
  },
  {
    "name": "Instagram",
    "url": "#"
  }
 ]
}

这是我的 jsx 代码：

import { useTranslation } from 'react-i18next';

const Content = () => {
  const { t, i18n } = useTranslation();

  const socials = t('socials', { returnObjects: true });

  rerurn (
    <div className="flex">
      {socials.map((social) => (
        <a href={social.url}>{social.name}</a>
      ))}
    </div>
  );
}

export default Content;

如何解决这个问题？

Answer 1

您的翻译可能是延迟加载的，您也可能没有使用 Suspense。这意味着翻译还没有为第一次渲染做好准备，您需要检查就绪标志：https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

import { useTranslation } from 'react-i18next';

const Content = () => {
  const { t, i18n, ready } = useTranslation();

  if (!ready) return 'loading translations...';

  const socials = t('socials', { returnObjects: true });

  rerurn (
    <div className="flex">
      {socials.map((social) => (
        <a href={social.url}>{social.name}</a>
      ))}
    </div>
  );
}

export default Content;

如何在 React 应用程序中迭代 i18n 对象数组？

How to iterate i18n array of objects in React app?

translation

functional-programming

i18next

reactjs