React组件中如何在JSX内嵌套渲染对象数组的sources属性？

问题根源 #

1. 数组调用错误：你写的p.map()是错误的，p是pkgData数组中的单个包对象，要遍历的是它的sources属性（这才是数组），所以应该用p.sources.map()。
2. JSX结构错误：React中，单个函数（包括map的回调函数）返回多个同级JSX元素时，必须用容器（比如<div>）或者React Fragment（<>）包裹，不能直接并列元素。

修正后的代码示例 #

<div className="pkgList">
  {pkgData.map((p) => (
    // 用Fragment包裹多个同级元素，不会生成额外DOM节点
    <>
      <h3 key={p.name}>{p.name}</h3>
      {/* 遍历当前包的sources数组，渲染需要的属性 */}
      {p.sources.map((source) => (
        // 这里替换成你要展示的source属性，比如source.name、source.path等
        <div key={source.id} className="source-item">
          <span>来源地址：{source.url}</span>
        </div>
      ))}
    </>
  ))}
</div>

注意事项 #

• 所有通过map生成的元素都必须添加唯一的key属性，React依靠它来优化列表渲染性能，避免渲染异常。如果sources中的对象没有天然的唯一标识（比如id），可以临时用索引（index），但不推荐在列表会排序/增删的场景下使用。
• 如果你使用的React版本低于16.2，不能用<>简写，需要导入React.Fragment并使用<React.Fragment>代替。

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