如何在 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 });

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

export default Content;