使用 next-i18next useTranslation 显示嵌套翻译

Question

目前，我正面临为嵌套翻译显示翻译文本的困难时期。

对于翻译我使用

next-i18next

的

useTranslation

.

这是我要显示的数据：

locales/en/homepage.json

{
  "title": "Unlimited movies, TV shows, and more.",
  "subTitle": "Watch anywhere. Cancel anytime.",
  "imageAlt": "Cover picture of Netflix catalogue",
  "benefits": [
    {
      "title": "Enjoy on your TV.",
      "description": "Watch on Smart TVs, Playstation, Xbox, Chromecast, Apple TV, Blu-ray players, and more."
    },
    {
      "title": "Watch everywhere.",
      "description": "Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV without paying more."
    },
    {
      "title": "Create profiles for kids.",
      "description": "Send kids on adventures with their favorite characters in a space made just for them—free with your membership."
    },
    {
      "title": "Download your shows to watch offline.",
      "description": "Save your favorites easily and always have something to watch."
    }
  ]
}

这是页面，我正在尝试显示它。使用

.map

方法将数据发送到组件。

Homepage.tsx

<ImageTileContainer>
 {benefits.map((data, i) => {
  const { imageSrc, imagePosition } = data;

  return i + 1 === benefits.length ? (
    <ImageTile
      key={t(`benefits[${i}].title`)}
      title={t(`benefits${i}.title`)}
      description={t(`benefits${i}.`)}
      imageSrc={imageSrc}
      imagePosition={imagePosition}
      imageAlt={t("benefits'.'title")}
    />
  ) : (
    <React.Fragment key={t("benefits'.'title")}>
      <ImageTile
        key={t(`benefits${i}.title`)}
        title={t(`benefits${i}.title`)}
        description={t(`benefits${i}.`)}
        imageSrc={imageSrc}
        imagePosition={imagePosition}
        imageAlt={t("benefits'.'title")}
      />

      <Divider />
    </React.Fragment>
  );
})}
</ImageTileContainer>

Currently I'm getting displayed

benefits0.title

并且无法真正弄清楚如何从嵌套的 JSON 实现所需的翻译。

还有我的 next-i18next.config.js

module.exports = {
  i18n: {
    locales: ["en", "cs"],
    defaultLocale: "en",
    localePath: "./public/locales",
    localeDetection: false,
  },
};

有人有过这样的经历吗？任何帮助将不胜感激。