Javascript 在异步调用中通过数据进行ReactJS循环

我有：

var container=document.getElementById（'container'）；
var App=React.createClass({
渲染：函数（）{
返回(
);
}
})
var JobList=React.createClass({
componentWillMount:函数（）{
这是我的国家({
职位：[]
});
这个.load（）；
},
加载：函数（）{
var self=这个；
get（'jobs/list'，null，{responseType:'json'}）
.然后（功能（响应）{
var x=0；
var jobs_数组=[]；
用于（var i响应）{
jobs_array.push（）；
x++；
}
setState（{jobs:jobs_array}）；
})
},
渲染：函数（）{
返回(
{this.state.jobs}
);
}
})
var Job=React.createClass({
渲染：函数（）{
返回(
{this.props.job.id}
{this.props.job.age}
)
}
}
);

qwest只是$.ajax的包装器

---

这是输出组件的最佳方式吗？我必须在ajax的回调中加入循环，因为调用通常会在调用render函数之前完成，因此我最终不会渲染任何内容。

如果只运行一次加载操作，这几乎是可以接受的。问题是，如果您稍后再次加载以使用新数据进行更新，您将得到奇怪的结果。键应该使用传入的数据唯一地标识组件实例。React使用它们，如果它们只是切换位置，则以后不必重新创建组件。您可以阅读有关使用密钥的对账过程的更多信息

我在您的

作业

组件中看到，您收到的作业有一个ID。假设它是唯一的，最好将其用作键，因为即使您开始使组件更具动态性，它也能可靠地工作

除此之外，您还可以在响应数组上使用cool

map

函数将它们映射到组件，而不必使用将内容推送到数组中的循环

最终结果如下所示：

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>
            )
        }
    }
);

qwest.get（'jobs/list'，null，{responseType:'json'}）
.然后（功能（响应）{
var jobs=response.map（函数（作业）{
返回（）；
});
self.setState（{jobs:jobs}）；
});

或者，使用ES6/Babel使用箭头函数（允许您摆脱将其绑定到self）：

qwest.get（'jobs/list'，null，{responseType:'json'}）
。然后（响应=>{
这是我的国家({
作业：response.map（作业=>）
});
});

另一点：您应该在组件中使用

getInitialState:function（）{return yourInitialState；}

来设置默认状态，而不是在

componentWillMount

中设置默认状态。然后，您可以将

组件willmount

更改为

组件didmount

，以便在完成初始渲染后开始加载（这样可以提高渲染性能）

qwest.get('jobs/list', null, {responseType: 'json'})
    .then(function (response) {
        var jobs = response.map(function(job) {
            return (<Job key={job.id} job={job} />);
        });
        self.setState({jobs: jobs});
    });

qwest.get('jobs/list', null, {responseType: 'json'})
    .then(response => {
        this.setState({
            jobs: response.map(job => <Job key={job.id} job={job} />)
        });
    });