在 React 组件里，可以把一组数据转换成列表界面。打开 PostIndex 组件，先在组件的 state 里面手工添加一组列表数据，名字是 postList，表示内容列表，它的值是一个数组，里面每个项目都是一个对象，对象里有 id ，content ，还有 author 这几个字段 。再添加两个结构一致的数据项目。

因为项目用了 typescript，所以我们还得设置一下相关的类型，在上面定义一个类型，名字是 PostListItem，用它描述一下每个数据项目的样子，添加一个 id，类型是 number，一个content，类型是 string，还有 author，类型是 string。

在组件的状态类型里，添加一个 postList，它的值的类型是一个 Array，数据项目的类型是上面定义的 PostListItem。

下面再去根据组件里的 postList 制造一个内容列表界面，在 render 这个方法里，可以声明一个 posts，它的值是一组用 JSX 表示的 React 元素。

这里我们用一下 this.state.postList这个数组上的 map 方法制造一组 React 元素，每次循环当前项目的名字可以叫 post，返回的东西就是内容列表里的内容项目界面。一组 div 元素，里面可以绑定输出 post.content ，一个小横线，再用一组 small 元素，里面的内容是 post 里的 author 属性的值。

这样这个 posts 就是一组内容列表项目，把它放在 render 方法返回的这个 div 元素的中间。

在浏览器上预览一下，现在界面上会显示根据 PostIndex 组件里的 postList 这个状态数据生成的内容列表。检查一下列表项目，每个项目都有一个 div 包装，里面是内容正文，小横线，接着是用 small 标签包装的内容作者。

再观察一下控制台，现在控制台上会报错，提示 Each child in a list should have a unique "key" prop. 列表里的列表项目都需要有一个 key 属性，并且属性的值在列表里必须是唯一的。

回到项目，在这个列表项目的 div 包装上，添加一个 key 属性，然后我们可以用 post 里的 id 作为这个 key 属性的值，因为 key 属性的值在这组列表项目里是唯一的。

再观察一下控制台，这次就不会再报刚才的错误了。