Next.js中如何低改动遍历JSON内的i18n数组？

问题分析 #

当前硬编码数组索引（如whatToExpect.features[0].title）的方式缺乏灵活性，若features数组顺序调整、新增/删除项，需手动修改data中的key，易出错且维护成本高。以下是几种无需大幅重构代码的动态实现方案：

方案1：利用map索引动态生成翻译路径 #

改动点：仅调整data结构和渲染逻辑，无需修改common.json

1. 简化data数组，去掉硬编码的titleKey和descriptionKey：

const data = [
  { id: 1, icon: icon1 },
  { id: 2, icon: icon2 },
  { id: 3, icon: icon3 },
  { id: 4, icon: icon4 },
  { id: 5, icon: icon5 },
  { id: 6, icon: icon6 }
];

2. 在渲染时通过map的索引动态拼接翻译路径：

const WhatToExpect = () => {
  const { t } = useTranslation('common');

  return (
    <Box sx={styles.features}>
      {data.map((item, index) => (
        <Feature
          className="feature-item"
          key={item.id}
          data={{
            icon: item.icon,
            title: t(`whatToExpect.features[${index}].title`),
            description: t(`whatToExpect.features[${index}].description`)
          }}
        />
      ))}
    </Box>
  );
};

优势：改动极小，仅需调整渲染逻辑，适合data与features数组顺序严格对应的场景。

方案2：通过ID关联，摆脱数组顺序依赖 #

改动点：给common.json的features项添加唯一ID，修改data存储对应ID，渲染时动态查找索引

1. 更新common.json，为每个feature添加id：

{
  "whatToExpect": {
    "span": "What to Expect",
    "features": [
      {
        "id": "feature_quick_setup",
        "title": "dfdfdfdf",
        "description": "lorem shshs3h"
      },
      {
        "id": "feature_real_time_sync",
        "title": "sdsdsdsd",
        "description": "dff4bjgd3jgj4343y."
      }
      // 其余4个项同理添加id
    ]
  }
}

2. 修改data数组，存储对应feature的ID：

const data = [
  { id: 1, icon: icon1, featureId: "feature_quick_setup" },
  { id: 2, icon: icon2, featureId: "feature_real_time_sync" },
  // 其余4个项同理配置featureId
];

3. 渲染时先获取features数组，通过ID查找对应索引：

const WhatToExpect = () => {
  const { t } = useTranslation('common');
  // 以对象形式获取features数组
  const features = t('whatToExpect.features', { returnObjects: true });

  return (
    <Box sx={styles.features}>
      {data.map((item) => {
        const featureIndex = features.findIndex(f => f.id === item.featureId);
        return (
          <Feature
            className="feature-item"
            key={item.id}
            data={{
              icon: item.icon,
              title: t(`whatToExpect.features[${featureIndex}].title`),
              description: t(`whatToExpect.features[${featureIndex}].description`)
            }}
          />
        );
      })}
    </Box>
  );
};

优势：不依赖数组顺序，即使features数组调整顺序，也不会影响翻译匹配，更健壮。

方案3：直接获取feature对象，避免重复调用t #

改动点：直接取出features数组的完整对象，直接使用其属性

const WhatToExpect = () => {
  const { t } = useTranslation('common');
  // 获取完整的features数组对象
  const features = t('whatToExpect.features', { returnObjects: true });

  return (
    <Box sx={styles.features}>
      {data.map((item, index) => {
        const currentFeature = features[index];
        return (
          <Feature
            className="feature-item"
            key={item.id}
            data={{
              icon: item.icon,
              title: currentFeature.title,
              description: currentFeature.description
            }}
          />
        );
      })}
    </Box>
  );
};

优势：代码更简洁，无需多次调用t函数，前提是data与features数组顺序严格对应，且i18next配置支持返回对象（默认开启）。

内容的提问来源于stack exchange，提问作者thearonimperial