GitHub的JSON有我们展示的数据，所以先要看看它里面具体的结构。修改componentWillMount()，使其在调用setState()之前有此行：
src/pages/Detail.js
console.dir(response.body);
做完这些，保存然后刷新浏览器加载页面，然后打开控制台，你应该看到“Array [30]”或类似的内容。使用console.dir（）在日志中打印出来，所以你应该可以单击“Array [30]”旁边的箭头来查看其中的各个对象。
使用控制台查看JSON的树形结构
你看到的每一个对象都是github上一个单独的React项目 commit，每个对象旁边都有个箭头，你可以折叠查看这些内容。对我们来说，感兴趣的是：
• author > login – 谁进行了更改
• commit > message – 进行了什么更改.
• html_url – 一个链接指向修改详情.
注意：GitHub将来可以更改其API，因此当你自己尝试时，这些字段可能不适用。所以，console.dir（）看看具体返回了什么。
我们要做的是以粗体打印作者的名字，然后打印他们提交的全文，用链接让他们可以点击，链接到每个commit的细节：
(<p key={index}>
<strong>{commit.author.login}</strong>:
<a href={commit.html_url}>{commit.commit.message}</a>.
</p>)
注意1: 我们需要使用 commit.commit.message 而不是 commit.message 因为commit本身在一个commit对象中。
注意2:当有多行的时候，风格上最好还是在JSX周围添加括号。
在这段代码运行的时候有可能得到错误，因为你看到的提交列表取决于最近发生的事情，但是有的时候author没有任何值，是null。所以如果尝试访问commit.author.login将出错，因为不存在。
有几种方法可以解决这个问题，一种方法是对Ajax返回值进行处理，如果commit没有author就跳过它。或者我们用三元运算符来检查是否存在author 如果不存在就显示一个默认值。比如这样：
(<p key={index}>
<strong>{commit.author ? commit.author.login : 'Anonymous'}</strong>:
<a href={commit.html_url}>{commit.commit.message}</a>.
</p>)
这是一个简单的解决方案，但如果commit 的URL丢失或commit消息丢失会发生什么？你会写很多个三元运算符，这很难看。
所以有第三个方案，计算前面的任何值。我们使用稍微不同的语法。用map()。我们的代码需要return一个值。
使用这个方法，Detail组件的render()应该是这样的:
src/pages/Detail.js
render() {
return (<div>
{this.state.commits.map((commit, index) => {
const author = commit.author ? commit.author.login : 'Anonymous';
return (<p key={index}>
<strong>{author}</strong>:
<a href={commit.html_url}>{commit.commit.message}</a>.
</p>);
})}
</div>);
}
修改后的代码创建一个新的author常数，根据有没有author设置是否显示Anonymous它还是用了三元运算符，不过它将算法和值分开，更容易阅读。
目前为止只是将所有信息显示出来
网友评论