如何将JSON数据渲染为独立的<li>元素？

你需要嵌套使用map方法，先遍历外层的Blog数组，再遍历每个博客对象里的list数组，为数组中的每一项生成独立的<li>元素。

修改后的React代码： #

<div>
  {Blog.map((blogDetail, index) => {
    return blogDetail.list.map((item, itemIndex) => {
      return <li key={itemIndex}>{item}</li>;
    });
  })}
</div>

补充说明： #

• 内层的map专门处理list数组的每一项，每遍历一次就生成一个单独的<li>，解决了原代码把整个数组内容塞进单个<li>的问题。
• 必须给每个<li>添加唯一的key属性（这里用itemIndex，如果列表项有自身唯一标识，用标识会比索引更稳妥），这是React列表渲染的规范要求。

优化建议（可选）： #

如果需要保留博客标题与列表的层级关联，可以在外层增加标题和<ul>标签，让页面结构更清晰：

<div>
  {Blog.map((blogDetail, index) => (
    <div key={blogDetail.id}>
      <h3>{blogDetail.title}</h3>
      <ul>
        {blogDetail.list.map((item, itemIndex) => (
          <li key={itemIndex}>{item}</li>
        ))}
      </ul>
    </div>
  ))}
</div>

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