ReactJS在异步调用中循环数据

I have:

var container = document.getElementById('container');

var App = React.createClass({
    render: function () {
        return (
            <div>
                <div className="col-xs-9 job-list"><JobList /></div>
                <div className="col-xs-3"><RightPanel /></div>
            </div>
        );
    }
})

var JobList = React.createClass({
    componentWillMount: function () {
        this.setState({
            jobs: []
        });
        this.load();
    },
    load: function () {
        var self = this;
        qwest.get('jobs/list', null, {responseType: 'json'})
            .then(function (response) {
                var x = 0;
                var jobs_array = [];
                for (var i in response) {
                    jobs_array.push(<Job key={x} job={response[i]}/>);
                    x++;
                }
                self.setState({jobs: jobs_array});
            })

    },
    render: function () {
        return (
            <div>
                {this.state.jobs}
            </div>
        );
    }
})

var Job = React.createClass({
        render: function () {
            return (
                <div className="job">
                    <div className="job-header">
                        {this.props.job.id}
                        <span className="pull-right"><abbr title={this.props.job.dateCreated}>{this.props.job.age}</abbr></span>
                    </div>
                    <div className="job-body">

                    </div>
                    <div className="job-footer"></div>
                </div>
            )
        }
    }
);
var container = document.getElementBy