Javascript 通过Asc或Dsc进行React js引导表排序

我想按asc和dsc顺序对react js表中的数据进行排序

目标：单击列标题后，我想按升序和降序对ReactJS表中的数据进行排序

问题：我的功能不是按升序或降序对记录进行排序。另外，在控制台上没有看到任何错误。有人能帮我调试一下吗

class Ddetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      walk: [],
      data: {
        columnName: "",
        sortOrder: "",
        searchText: ""
      }
    };
    this.sortChanged = this.sortChanged.bind(this);
    this._sortClass = this._sortClass.bind(this);
  }
  sortChanged(e: any, order: string) {
    const Data = this.state.data;
    Data.sortOrder = order.toString().toLowerCase() === "asc" ? "desc" : "asc";
    Data.columnName = e.currentTarget.innerText;
    this.setState({ data: Data });
  }
  _sortClass(filterName: string) {
    return (
      "fa fa-fw " +
      (filterName === this.state.data.columnName
        ? "fa-sort-" + this.state.data.sortOrder
        : "fa-sort")
    );
  }


  render() {
    return (
        <table
            // id="example"
            class="table table-hover"
            style={{ width: "100%" }}
          >
            <thead style={{ position: "relative" }}>
              <tr className="th">
                <th
                  onClick={e => {
                    this.sortChanged(e, this.state.data.sortOrder);
                  }}
                >
                  Id
                  <i className={this._sortClass("Id")} />
                </th>
                <th>Date</th>
                <th>Plate Number</th>
                <th
                  style={{ width: "100px" }}
                  onClick={e => {
                    this.sortChanged(e, this.state.data.sortOrder);
                  }}
                >
                  Mileage[Km]
                  <i className={this._sortClass("Mileage[Km]")} />
                </th>
                <th className="t">Fuel Consumed[L]</th>
                <th className="t">
                  Average Fuel <br></br> Consumed[L/100km]
                </th>
                <th className="t">
                  Overspeeding <br></br> Distance[%]
                </th>
                <th className="t">
                  <span
                    id="dropdownMenuLink"
                    role="button"
                    className="dropdown-toggle"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                    //
                  >
                    Overall <br></br> Score
                  </span>
                  <div
                    class="dropdown-menu nott "
                    aria-labelledby="dropdownMenuLink"
                    style={{ position: "relative", zIndex: "9999999" }}
                  >
                    <a class="dropdown-item" href="# ">
                      Action
                    </a>
                    <a class="dropdown-item" href="/dashboard ">
                      dashboard
                    </a>
                    <a class="dropdown-item" href="# ">
                      Something else here
                    </a>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>SArchitect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>41</td>

                <td>$320,800</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>31</td>

                <td>$320,800</td>
              </tr>

            </tbody>
                          </table>

    );
  }
}

类详细信息扩展组件{
建造师（道具）{
超级（道具）；
此.state={
步行：[]，
数据：{
列名称：“”，
排序器：“，
搜索文本：“
}
};
this.sortChanged=this.sortChanged.bind（this）；
this.\u sortClass=this.\u sortClass.bind（this）；
}
sortChanged（e:any，order:string）{
const Data=this.state.Data；
Data.sortOrder=order.toString（）.toLowerCase（）==“asc”？“desc”：“asc”；
Data.columnName=e.currentTarget.innerText；
this.setState（{data:data}）；
}
_sortClass（过滤器名称：字符串）{
返回(
“fa-fa-fw”+
（filterName==this.state.data.columnName
？“fa排序-”+this.state.data.sortOrder
：“fa排序”）
);
}
render（）{
返回(
{
this.sortChanged（e，this.state.data.sortOrder）；
}}
>
身份证件
日期
车牌号
{
this.sortChanged（e，this.state.data.sortOrder）；
}}
>
里程[公里]
耗油量[升]
平均耗油量

消耗量[L/100km]
超速距离[%]
总体得分
1.
肉瘤
爱丁堡
61
2011/04/25
$320,800
41
$320,800
2.
会计
东京
63
2011/07/25
$170,750
31
$320,800
);
}
}