react-i18next循环内动态name值无法翻译问题求解

问题根因 #

• t函数使用逻辑错误：现有写法t("inventory.item.name", name)是将固定字符串inventory.item.name作为翻译key，你配置的多语言包中该key的值就是"name"，因此所有行渲染结果都是固定的name。你需要将动态的物品名称作为翻译key的一部分，才能匹配到对应的多语言值。
• 字段解构不匹配：示例数组中数量字段为num_of_pieces，代码中错误解构为num_of_item，会导致数量取值异常。
• 缺少物品名称的多语言配置：未在en、es语言包中配置每个物品名称对应的翻译映射。

解决步骤 #

1. 补充多语言包配置 #

在你的i18next语言资源文件中新增物品名称的翻译映射：

英文资源（en.json）

{
  "inventory": {
    "item": {
      "num": "{{count}} pieces",
      "smartwatch": "smartwatch",
      "smart TV": "smart TV",
      "juicer": "juicer",
      "hand blender": "blender"
    }
  }
}

西班牙语资源（es.json）

{
  "inventory": {
    "item": {
      "num": "{{count}} piezas",
      "smartwatch": "reloj inteligente",
      "smart TV": "Televisión inteligente",
      "juicer": "exprimidor",
      "hand blender": "licuadora"
    }
  }
}

2. 修正组件代码 #

调整解构字段、t函数调用逻辑，同时补充循环渲染必填的key属性：

const RenderInventoryItems = () =>
  inventoryList &&
  inventoryList.map(({ name, num_of_pieces }, index) => (
    <ul key={index}>
      <li>{t(`inventory.item.${name}`)}</li>
      <li>{t('inventory.item.num', { count: num_of_pieces })}</li>
    </ul>
  ));

注意事项 #

• 确保inventoryList中name字段的值和语言包中配置的key完全一致，大小写、空格都要匹配，否则会找不到对应翻译。
• 后续新增物品时，只需在两个语言包的inventory.item节点下新增对应key和翻译值即可。

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