Question

我有：

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只是$ .ajax的包装。

这是输出组件的最佳方式吗？我不得不把循环放在ajax的回调中，因为调用通常在调用render函数之前完成，所以我最终没有渲染。

Answer 1

如果您只打算执行一次加载操作，则几乎可以接受。问题是，如果您稍后再次加载以使用新数据进行更新，则会得到奇怪的结果。键应该使用进来的数据唯一地标识组件实例.React使用它们，如果它们只是切换位置，则不必在以后重新创建组件。您可以使用密钥here了解有关对帐流程的详情。

我在您的files: [ { src: 'static/**', dest: 'test/' } ]组件中看到您收到的工作有一个ID。假设它是独一无二的，那么使用它作为关键要好得多，因为即使你开始使你的组件更具动态性，它也能可靠地工作。

除此之外，您可以在响应数组上使用酷Job函数将它们映射到组件，而不必使用将事物推入数组的循环。

最终结果如下：

map

或者，使用ES6 / Babel使用箭头功能（允许你摆脱对自己的绑定）：

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} />) }); });来设置默认状态，而不是在getInitialState: function() {return yourInitialState;}中设置它。然后，您可以将componentWillMount更改为componentWillMount，以便在完成初始渲染后开始加载（并以此方式提高渲染性能）。

ReactJS在异步调用中循环数据

1 个答案: