React中遍历JSON对象多数组：如何获取首个维生素名称？

你遇到的问题根源在于对Object.keys()的返回值理解有误，咱们一步步拆解：

错误原因 #

你的JSON结构中，nutrients是一个包含vitamins和minerals两个数组的对象。当你调用Object.keys(nutrients)时，返回的是键名组成的字符串数组：["vitamins", "minerals"]。

在map循环里，nutrient变量对应的是这些字符串（比如"vitamins"），而不是nutrients.vitamins这个数组。所以nutrient[0]取的是字符串的第一个字符（比如"v"），自然没有.name属性，这就是代码失效的原因。

解决方案 #

根据你的需求，分两种情况给出代码：

情况1：只需要显示第一个维生素（Vitamin B2）

如果你的目标仅仅是获取vitamins数组的第一个对象的name，完全不需要遍历所有键，直接访问即可：

import nutrients from '../../vitamins.json';

renderData() {
  // 直接获取vitamins数组的第一个元素
  const firstVitamin = nutrients.vitamins[0];
  return <option value="" key="first-vitamin">{firstVitamin.name}</option>;
}

情况2：遍历所有营养类别，每个类别取第一个元素显示

如果你想遍历vitamins、minerals等所有类别，每个类别只显示第一个元素的名称，可以调整代码，通过键名获取对应的数组：

import nutrients from '../../vitamins.json';

renderData() {
  return Object.keys(nutrients).map((categoryKey, index) => {
    // 通过键名获取对应的数组，再取第一个元素
    const firstItem = nutrients[categoryKey][0];
    console.log('当前类别第一个元素', firstItem.name);
    return <option value="" key={index}>{firstItem.name}</option>;
  });
}

这样修改后，就能正确获取到每个营养类别下第一个元素的名称，比如Vitamin B2和Zinc。

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