[以修正]react 如何循环输出接口中的数据？

Question

单个输出数据可以，如何循环输出接口中的数据？求解？

原始

<div id="demo"></div>
    <script type="text/babel">
        var UserGist = React.createClass({
            getInitialState:function(){
                return {
                    username: '',
                      lastGistUrl: ''
                }
            },
            componentDidMount:function(){
                $.get(this.props.source, function(result) {
                    var datas = result[0];
                    this.setState({
                        username: datas.owner.login,
                          lastGistUrl: datas.html_url
                    })
                }.bind(this));
            },
            render:function(){
                return (
                    <div>
                        <em>{this.state.username}</em> : {this.state.lastGistUrl}
                    </div>
                )
            }
        });
        ReactDOM.render(
            <UserGist source="https://api.github.com/users/octocat/gists" />,
            document.getElementById('demo')
        );
    </script>

成功

<div id="demo"></div>
    <script type="text/babel">
        var UserGist = React.createClass({
            getInitialState:function(){
                return {
                    data:[]
                }
            },
            componentDidMount:function(){
                $.get(this.props.source, function(datas) {
                    this.setState({
                        data:datas
                    });
                }.bind(this));
            },
            render:function(){
                return (
                    <div>
                        {
                            this.state.data.map(function(item,index){
                                return (
                                    <div key={index}>
                                        <p><em>{item.owner.login}</em> : {item.html_url}</p>
                                    </div>
                                )
                            })  
                        }
                    </div>
                )
            }
        });
        ReactDOM.render(
            <UserGist source="https://api.github.com/users/octocat/gists" />,
            document.getElementById('demo')
        );
    </script>

Answer 1

var UserGist = React.createClass({
            getInitialState:function(){
                return {
                    datas: []
                }
            },
            componentDidMount:function(){
                $.get(this.props.source, function(datas) {
                    this.setState({
                        datas
                    })
                }.bind(this));
            },
            render:function(){
                return (
                    <div>
                        {
                            this.state.datas.map(item => (<div>
                                <em>{item.username}</em> : {item.lastGistUrl}
                            </div>))
                        }
                    </div>
                )
            }
        });