React.js如何遍历嵌套数组？

你只需要在ul标签内部，对item.hobbies再次使用map方法遍历这个嵌套数组，生成对应的li元素即可。同时要给每个li设置唯一的key，避免React渲染警告。

修改后的完整代码如下：

const myContacts = [
   {
     name: 'John',
     hobbies: ['swimming', 'skateboard', 'TV']
   },
   {
     name: 'Sarah',
     hobbies: ['Cooking'],
   },
   {
     name: 'Cindy',
     hobbies: ['Shopping', 'Running'],
   },
];
 
function MyPeeps({ myContacts }) {
  return (
    <div>
      {myContacts.map((item, index) => {
        return (
          <div key={index}>
            <p>{item.name}</p>
            {item.hobbies && item.hobbies.length > 0 &&
              <ul>
                {item.hobbies.map((hobby, hobbyIndex) => (
                  <li key={`${index}-${hobbyIndex}`}>{hobby}</li>
                ))}
              </ul>
            }
          </div>
        )
      })}
    </div>
  )
}

补充说明 #

• 额外添加item.hobbies.length > 0的判断，避免hobbies为空数组时渲染空的ul标签，让页面结构更整洁。
• 关于key：外层用index是临时方案，如果后续数组有增删、排序操作，建议用每个联系人的唯一标识（比如id）作为key；内层用${index}-${hobbyIndex}是为了保证不同联系人之间，即使爱好名称重复，key也不会冲突。

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