简单易懂的React魔法(16):将GitHub的JSON转换为有意义的JSX

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的细节：

(

    {commit.author.login}:
    {commit.commit.message}.
)

注意1: 我们需要使用 commit.commit.message 而不是 commit.message 因为commit本身在一个commit对象中。

注意2:当有多行的时候，风格上最好还是在JSX周围添加括号。

在这段代码运行的时候有可能得到错误，因为你看到的提交列表取决于最近发生的事情，但是有的时候author没有任何值，是null。所以如果尝试访问commit.author.login将出错，因为不存在。

有几种方法可以解决这个问题，一种方法是对Ajax返回值进行处理，如果commit没有author就跳过它。或者我们用三元运算符来检查是否存在author 如果不存在就显示一个默认值。比如这样：

(

    {commit.author ? commit.author.login : 'Anonymous'}:
    {commit.commit.message}.
)

这是一个简单的解决方案，但如果commit 的URL丢失或commit消息丢失会发生什么？你会写很多个三元运算符，这很难看。

所以有第三个方案，计算前面的任何值。我们使用稍微不同的语法。用map()。我们的代码需要return一个值。

使用这个方法，Detail组件的render()应该是这样的:

src/pages/Detail.js

render() {
    return (

    {this.state.commits.map((commit, index) => {
        const author = commit.author ? commit.author.login : 'Anonymous';

        return (

            {author}:
            {commit.commit.message}.
        
);
    })}
    
);
}

修改后的代码创建一个新的author常数，根据有没有author设置是否显示Anonymous它还是用了三元运算符，不过它将算法和值分开，更容易阅读。

目前为止只是将所有信息显示出来