在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ [以修正]react 如何循環(huán)輸出接口中的數(shù)據(jù)?

[以修正]react 如何循環(huán)輸出接口中的數(shù)據(jù)?

單個(gè)輸出數(shù)據(jù)可以,如何循環(huán)輸出接口中的數(shù)據(jù)?求解?

原始

<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>
回答
編輯回答
有點(diǎn)壞
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>
                )
            }
        });
2018年5月7日 04:08