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

Question

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

我想迭代 socials 数组并将其显示在我的模板中。但是当我这样做时，它说：socials.map不是一个函数

这是我的翻译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;

Answer 2

在我的例子中，迭代翻译数组效果很好，直到触发了changeLanguage方法。事情是由于某种原因 i18n 将数组项转换为对象的属性。按照上面 Mehdi 的数据：

This:

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

变成了 this:

    {
  "socials": {
  social1: {
    "name": "Github",
    "url": "#"
  },
  social2: {
    "name": "Twitter",
    "url": "#"
  },
  social3: {
    "name": "Linkedin",
    "url": "#"
  },
  social4: {
    "name": "Instagram",
    "url": "#"
  }
 }
}

为了使其工作，我编写了一个辅助函数来检查传递的对象是数组还是对象（因为当 18n 被 init()ialized 时，它是一个数组）并且如果它是一个对象，它将其 props 转换回数组项。在此转换映射/循环工作之后，不再出现“.map() 不是函数”错误。

const objToArr = (obj) => {
    if (obj.length > 0) {
      return obj;
    }
    let arr = [];
    for (let i = 0; i < Object.keys(obj).length; i++) {
      const n = `social${i + 1}`;
      arr.push(obj[n]);
    }
    return arr;
  };

返回对象为：

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