ReactJS:Dom 渲染顺序错误

我有一个页面，是一个包含几列的表格。 用户可以按几个不同的值对表中的条目进行排序;当用户单击标题时，将执行排序，并触发页面的新呈现。 但是，虽然正确执行排序，但 DOM 不会以正确的顺序呈现;表中的某些元素会切换位置，但大多数元素保持不变。 当使用 Chrome 的 react 插件检查元素时，React 以正确的顺序显示内容;只是 DOM 实际上与 react 认为正在发生的事情不匹配。

我的代码如下：

var BinData = React.createClass( {
    render: function() {
        return (
            <tr className="databin">    
                <td className="name">
                    <span className="name-field">
                        <span className="databin-name">{this.props.data.Name ? this.props.data.Name: "Databin Name"}</span>
                        <span className="wdd-icon-edit-name"></span>
                    </span>
                </td>
                <td className="id">{this.props.data.ShortID ? this.props.data.ShortID: "None"}</td>
                <td className="date">{this.props.data.formatedLatestTimestamp}</td>
                <td className="url"><a href={this.props.data.ShortURL}>{this.props.data.ShortURL}</a></td>
                <td className="size">{this.props.data.Size}</td>
                <td className="owner">{this.props.data.Owner}</td>
                <td className="actions"><span className="icon-container"><span className="wdd-icon-wolfram-alpha"><br /></span><span className="text analyze">Analyze in Wolfram|Alpha</span></span><span className="icon-container"><span className="wdd-icon-wolfram-language-small"><br /></span><span className="text explore">Open in Wolfram Language</span></span><span className="icon-container"><span className="wdd-icon-download"><br /></span><span className="text download">Download raw data</span></span><span className="icon-container"><span className="wdd-icon-collaborate"><br /></span><span className="text access">Access settings</span></span><span className="icon-container"><span className="wdd-icon-delete"><br /></span><span className="text delete">Remove from my list</span></span></td>
            </tr>
        );
    }
});

var BinList = React.createClass( {
    getInitialState: function() {
        return {
            sorting: "Date"
        };
    },
    sortByName: function(bins,selected) {
        function compare(a,b) {
            if (a.Name < b.Name) {
                return -1;
            }
            if (a.Name > b.Name) {
                return 1;
           }
           return 0;
        }
        if (selected == "My Databins") {
            bins.Creator.sort(compare);
        }
        else if (selected == "Recent Databins") {
            bins.Contributor.sort(compare);
        }
        else {
            bins.SharedWithMe.sort(compare);
        }
        this.setState({sorting: "Name"});
    },
    sortByDate : function(bins,selected) {
        function compare(a,b) {
            return b.LatestTimestamp - a.LatestTimestamp;
        }
        if (selected == "My Databins") {
            bins.Creator.sort(compare);
        }
        else if (selected == "Recent Databins") {
            bins.Contributor.sort(compare);
        }
        else {
            bins.SharedWithMe.sort(compare);
        }
        this.setState({sorting: "Date"});
    },
    sortByOwner: function(bins,selected) {
        function compare(a,b) {
            if (a.Owner < b.Owner) {
                return -1;
            }
            if (a.Owner > b.Owner) {
                return 1;
            }
            return 0;
        }
        if (selected == "My Databins") {
            bins.Creator.sort(compare);
        }
        else if (selected == "Recent Databins") {
            bins.Contributor.sort(compare);
        }
        else {
            bins.SharedWithMe.sort(compare);
        }
        this.setState({sorting: "Owner"});
    },
    sortBySize: function(bins,selected) {
        function compare(a,b) {
            return b.Size - a.Size;
        }
        if (selected == "My Databins") {
            bins.Creator.sort(compare);
        }
        else if (selected == "Recent Databins") {
            bins.Contributor.sort(compare);
        }
        else {
            bins.SharedWithMe.sort(compare);
        }
        this.setState({sorting: "Size"});
    },
    refresh: function() {
        console.log("in refresh");
        this.forceUpdate();
    },
    render: function() {
        var rows = [];
        if (this.props.selected == "My Databins") {
            if (this.props.data.Creator) {
                this.props.data.Creator.forEach(function(bin) {
                    rows.push(<BinData data={bin} key={bin.UUID}/>);
                });
            };
        }
        else if (this.props.selected == "Recent Databins") {
            if (this.props.data.Contributor) {
                this.props.data.Contributor.forEach(function(bin) {
                    rows.push(<BinData data={bin} key={bin.UUID}/>);
                });
            };
        }
        else {
            if (this.props.data.SharedWithMe) {
                this.props.data.SharedWithMe.forEach(function(bin) {
                    rows.push(<BinData data={bin} key={bin.UUID}/>);
                });
            };
        }
        return (
            <section>
                {rows.length > 0 ?
                <table className="databins-list">
                    <thead>
                        <tr className="table-head">
                            <th className="head-names"><a className="sort descending" href="#" onClick={this.sortByName.bind(this,this.props.data, this.props.selected)}>Databin Name {this.state.sorting == "Name" ? <span className="triangle-down"></span>: ""}</a></th>
                            <th className="head-ids">Databin ID</th>
                            <th className="head-dates"><a className="sort" href="#" onClick={this.sortByDate.bind(this,this.props.data,this.props.selected)}>Latest Entry {this.state.sorting == "Date" ? <span className="triangle-down"></span>:""}</a></th>
                            <th className="head-urls">Databin Url</th>
                            <th className="head-sizes"><a className="sort" href="#" onClick={this.sortBySize.bind(this,this.props.data,this.props.selected)}>Size {this.state.sorting=="Size" ? <span className="triangle-down"></span>:""}</a></th> 
                            <th className="head-owners"><a className="sort" href="#" onClick={this.sortByOwner.bind(this,this.props.data,this.props.selected)}>Owner {this.state.sorting=="Owner" ? <span className="triangle-down"></span>:""}</a></th>
                            <th className="head-actions"><a className="refresh" onClick={this.refresh.bind(this)}>Refresh databins <span className="wdd-icon-refresh"></span></a></th> 
                        </tr>
                    </thead>
                    <tbody> {rows} </tbody>
                </table> :
                <AdminZeroState selected={this.props.selected} />
                }
            </section>
        );
    }
});

有没有人知道为什么 DOM 中呈现的内容与 react 认为正在发生的事情不匹配？