通过调用sort函数不会执行对视图的更新

Question

我在Typescript

中创建了这个React组件

import * as React from "react";

import { IExcelProps } from "../interfaces/ExcelProps";
import { IExcelState } from "../interfaces/ExcelState";

class Excel extends React.Component<IExcelProps, IExcelState> {

  name = "Excel";

  static propTypes: React.ValidationMap<any> = {
    header: React.PropTypes.arrayOf(
      React.PropTypes.string
    ).isRequired,
    initialData: React.PropTypes.arrayOf(
      React.PropTypes.arrayOf(React.PropTypes.string)
    ).isRequired
  }

  // this correspond to getInitialState
  initialState : IExcelState = {
    data: this.props.initialData
  };

  constructor(excelProps: IExcelProps) {
    super(excelProps);
  }

  componentWillMount() {
    this.setState(new ExcelState(this.initialState.data));
  }

  // This cause the following warning:
  // =================================
  // Warning: getInitialState was defined on Excel, a plain JavaScript class
  // This is only supported for classes created using React.createClass.
  // Did you mean to define a state property instead?
  // =================================
  // getInitialState() {
  //   return {
  //     data: this.props.initialData
  //   };
  // }

  render() {
    return (
      <div className="panel panel-default">
        <div className="panel-heading">Airports Codes</div>
        <table className="table">
          <thead onClick={this._sort}>
            <tr>
              {this._renderHeader(this.props.header)}
            </tr>
          </thead>
          <tbody>
            {this._renderTableBody(this.state.data)}
          </tbody>
        </table>
      </div>
    );
  }

  private _renderHeader(header: string[]) : React.ReactElement<any>[] {
    return (
      header.map((value, idx) => {
        return <th key={idx}>{value}</th>
      })
    );
  }

  private _renderTableBody(body: string[][]) : React.ReactElement<any>[] {
    return (
      body.map((row, idx) => {
        return (
          <tr key={idx}>
          {
            row.map((value, idx) => {
              return <td key={idx}>{idx === 1 ? this._beautifyTypeColumn(value) : value}</td>
            })
          }
          </tr>
        );
      })
    );
  }

  private _sort(event) {
    // this get the cellIndex corresponding with the header column
    var column = event.target.cellIndex;
    // returns a shallow copy of a portion of an array into a new array object.
    var dataTemp = this.state.data.slice();
    this.setState(new ExcelState(dataTemp.sort((a: any, b: any) => {
      return b[column] - a[column];
    })));
  }

  private _beautifyTypeColumn(value: string) : string {
    return this._capitalizeEachWord(value.replace('_', ' '));
  }

  private _capitalizeEachWord(value: string) : string {
    return value.replace(/\w\S*/g, (txt) => {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }
}

// XXX: move somewhere else
class ExcelState implements IExcelState {
  data : string[][];

  constructor(data: string[][]) {
    this.data = data;
  }
}

export default Excel;

该组件应该做什么主要是显示接收的数据，当用户点击标题时，它应该对元素进行排序。不幸的是，它不起作用，我无法弄清楚原因。我正确地调用_sort函数但它不起作用。