集成react-i18next时出现问题：一些嵌套的JSON密钥被拒绝

Question

我遇到了react-i18next 的问题，它莫名其妙地拒绝了我的JSON 文件中的某些键。尽管进行了彻底的检查，我仍无法确定这种意外行为的根本原因。任何人都可以提供解决此问题的见解或解决方案吗？ 我尝试了不同的 i18 初始化选项，但没有成功。

i18n.tsx：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translationEN from './en.json';
const resources = {
    en: {
        translation: translationEN,
    },
};
i18n
    .use(initReactI18next)
    .init({
        resources,
        lng: 'en',
        debug: true
    });

export default i18n;

index.tsx：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import i18n from "./i18n";
import { I18nextProvider } from "react-i18next";
const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>,
);

App.tsx：

import "./styles.css";
import { WithTranslation, withTranslation } from "react-i18next";
export default withTranslation()(function App(props: WithTranslation) {
  const { t } = props;
  return (
    <>
      <h3>{t("color.red")} - ok</h3>
      <h3>{t("color.deep.purple")} - ok</h3>
      <h3>{t("size.big")} - ok</h3>
      <h3>{t("size.small.quantum")} - ok</h3>
      <h3>{t("size.small.nano")} - ok</h3>
      <h3>{t("size.small.mini")} - NOT OK ???</h3>
      <h3>{t("size.small.tiny")} - ok</h3>
    </>
  );
});

翻译json：

   {
    "color": {
      "red": "red",
      "deep": {
        "purple": "deep purple"
      }
    },
    "size": {
      "big": "big",
      "small": {
        "quantum": "quantum",
        "nano": "nano",
        "mini:": "mini",
        "tiny": "tiny"
      }
    }
  }

截图：

我在codesandbox上重新创建了这个问题： 链接

Answer 1

你写的是“迷你：”而不是迷你

{
      "color": {
        "red": "red",
        "deep": {
          "purple": "deep purple"
        }
      },
      "size": {
        "big": "big",
        "small": {
          "quantum": "quantum",
          "nano": "nano",
          "mini": "mini",
          "tiny": "tiny"
        }
      }
    }