React-intl анализирует массив json в файле локали

У меня есть другой подход к решению вашей проблемы. (Хотя это может быть не лучшее решение, и это не совсем ваш английский/немецкий перевод, но я думаю, что они похожи)

Сначала мы можем определить файл со всеми ключами локализации:

// i18n/keys.js 
export const student = {
 
  projects: [
    {
      name: "student.projects.0.name",
      desc: "student.projects.0.desc",
    },
    {
      name: "student.projects.1.name",
      desc: "student.projects.1.desc",
    },
  ],
};

export const localizationKeys = {
  student: student,
};

В файлах локали i18n мы можем определить переводы, как показано ниже:

// i18n/en/student.js
export const student = {
  projects: [
    {
      name: "Camera",
      desc: "Photo",
    },
    {
      name: "Foods",
      desc: "Apple",
    },
  ],
};

// i18n/zh_tw/student.js
export const student = {
  projects: [
    {
      name: "拍攝",
      desc: "照片",
    },
    {
      name: "食物",
      desc: "蘋果",
    },
  ],
};

Экспортируйте переводы из i18n в языковые модули для react-i18n.

// i18n/en/index.js
import { student } from "./student";

const en = {
  general: general,
};

export default en;

// i18n/zh_tw/index.js
import { student } from "./student";

const zh_tw = {
  student: student,
};

export default zh_tw;

В ваших компонентах реакции вы можете получить доступ к своим ключам локализации (keys.js), чтобы вернуть каждое из имен ключей i18n.

import React from "react";
import { useIntl } from "react-intl";
import { localizationKeys } from "./i18n/keys";
import { IntlProvider } from "react-intl";
import zh_tw from "./i18n/zh_tw";
import flatten from "flat";
import en from "./i18n/en";

const messages = {
  en: flatten(en),
  "zh-Hant-TW": flatten(zh_tw),
};

export default function ProjectShowcase() => {
  const intl = useIntl();
  const [locale, setLocale] = useState(navigator.language);
  const [mergedMessages, setMergedMessages] = useState(messages["en"]);

  useEffect(() => {
    // Merging english and current locale, avoid showing Text id if cannot look for the translate in locale file
    // In this case, it will always show EN translate as default if the text-id not found in a "zh_tw" locale
    setMergedMessages(Object.assign({}, messages["en"], messages[locale]));
  }, [locale]);
  
  return (
  <IntlProvider
      messages={mergedMessages}
      locale={locale}
      key={locale}
      defaultLocale="en"
    >
    {localizationKeys.student.projects.map((p, idx) => {
        return (
          <ul>
            <li>
              <span>
                {intl.formatMessage({
                  id: localizationKeys.student.projects[idx].name,
                })}
              </span>
              {` (${intl.formatMessage({
                id: localizationKeys.student.projects[idx].desc,
              })})`}
            </li>
          </ul>
        );
      })
    }
 </IntlProvider>
  )
}

Я разработал небольшой пример для react-intl, вы можете найти более законченный код внутри: https://github.com/applelok/react-localization