Reactjs 在对列进行排序后检查或选择行时，HTML表会变回原来的状态

排序前的网格如下所示：

现在我将根据患者ID对其进行排序

现在，当我检查排序后最后一个位置的患者ID:936447时，网格返回到其原始排序

但是，即使在选中复选框/选择一行之后，我仍然需要已排序的网格。 这是用于显示网格和对网格进行排序的代码

class App extends Component {
 constructor(props) {
        super(props);
        this.state = {
            order: {},
            orderby: '',
            printQueueList: props.printQueueList && props.printQueueList,
        };

        this.sort = this.sort.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        if (this.state.printQueueList != nextProps.printQueueList)
            this.setState({ printQueueList: nextProps.printQueueList && nextProps.printQueueList });
    }
    sort(event) {
        const { order } = this.state;
        let { printQueueList } = this.props;
        var gridData = printQueueList;
        order[event.target.id] = !order[event.target.id];
        gridData = _.orderBy(gridData, (o) => typeof o[event.target.id] === 'string' ? o[event.target.id].trim().toLowerCase() : o[event.target.id], order[event.target.id] ? 'asc' : 'desc');
        this.setState({
            orderby: event.target.id,
            printQueueList: gridData,
            order
        });
    }
  render() {
    return (
      <div className="App">
        <table >
    <thead >
    <tr >
        <th id="select" >
    <Checkbox
        input={{
        name: 'selectAll',
        onChange:  //function 
        value: allSelected
        }}
        />
    <label htmlFor="SelectAll" >Select All</label>
        </th>
    <th id="PatientID"  onClick={this.sort}>Patient ID {order.PatientID ? <i id="PatientID" className="fa fa-sort-asc" /> : <i id="PatientID" className="fa fa-sort-desc" />}</th>
    <th id="DocType"  onClick={this.sort}>Type {order.DocType ? <i id="DocType" className="fa fa-sort-asc" /> : <i id="DocType" className="fa fa-sort-desc" />}</th>                                   
    </tr>
    </thead>
    <tbody >

    printQueueList && printQueueList.map((Queue, i) => {                                   
    return (
    <tr key={Queue.PrintQueueID} 
    onClick={() => onSelectPrintQueueGrid(Queue.PrintQueueID)}>
        <td >
    <Checkbox 
        input={{
        name: Queue.PrintQueueID,
        onChange:  //function
        value: selectedPrintQueueList.indexOf(Queue.PrintQueueID) !== -1,
        }}
    />
    </td>
    <td className="dashboard_table-cell" title={'Patient ID:' + Queue.PatientID}>{Queue.PatientID}</td>
    <td className="dashboard_table-cell" title={'Type:' + Queue.DocType}>{Queue.DocType}></td>
    </tr>)
    }
    )
    </tbody>
</table>
      </div>
    )
  }
}

const mapStateToProps = state => {
    return {
        printQueueList: state.myDashboardReducer.printQueueList,
    };
};

const mapDispatchToProps = dispatch => {
    return {

    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App);

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
顺序：{}，
订购人：“”，
printQueueList:props.printQueueList&&props.printQueueList，
};
this.sort=this.sort.bind（this）；
}
组件将接收道具（下一步）{
if（this.state.printQueueList！=nextrops.printQueueList）
this.setState（{printQueueList:nextrops.printQueueList&&nextrops.printQueueList}）；
}
排序（事件）{
const{order}=this.state；
设{printQueueList}=this.props；
var gridData=printQueueList；
顺序[event.target.id]=！顺序[event.target.id]；
gridData=\.orderBy（gridData，（o）=>o[event.target.id]的类型=='string'？o[event.target.id].trim（）.toLowerCase（）：o[event.target.id]，order[event.target.id]？'asc'：'desc'）；
这是我的国家({
orderby:event.target.id，
printQueueList:gridData，
秩序
});
}
render（）{
返回(
全选
患者ID{order.PatientID？：}
类型{order.DocType？：}
printQueueList&&printQueueList.map（（队列，i）=>{
返回(
onSelectPrintQueueGrid（Queue.PrintQueueID）}>
{Queue.PatientID}
{Queue.DocType}>
)
}
)
)
}
}
常量mapStateToProps=状态=>{
返回{
printQueueList:state.myDashboardReducer.printQueueList，
};
};
const mapDispatchToProps=调度=>{
返回{
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（App）；

由于

组件将接收props（nextrops）

使用

newProps

更新状态，因此数组

printQueueList

将得到更新。因此，在使用

newProps

更新之前，我检查了数组是否已排序

如果未排序，请使用

newProps

更新

printQueueList

componentWillReceiveProps(nextProps) {
        if(_.isEmpty(this.state.order)){
        if (this.state.printQueueList != nextProps.printQueueList)
            this.setState({ printQueueList: nextProps.printQueueList && nextProps.printQueueList });
        }
    }