如何在reactjs中对获取的数据表进行排序答案

【问题标题】：How to sort table of fetched data in reactjs如何在reactjs中对获取的数据表进行排序
【发布时间】：2019-04-09 18:49:08
【问题描述】：

我创建了一个表，其中包含从服务器获取的数据，我正在尝试对其进行排序，但不知道如何访问某些数据。例如，如何通过售价或观察者数量对行进行排序。我通常看到的是一个很容易排序的对象，可以轻松访问键和值，但是我正在努力解决将我的代码与 API 连接起来的原始路径。这是一段代码：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      itemList: [],
    };
  }
  createTableItems = () => {
    const {loading, itemList} = this.state;
        
    return (
      itemList.map((item, index) => {
        return (
          <tr key={index+1}>
            <td>{index+1}</td>
            <td 
              className="imgURL"
              style={{
                backgroundImage: `url(${item.galleryURL})`
              }}>
            </td>
            <td className="textToLeft">{item.title}</td>
            <td>{categoryItems}</td>
            <td>{ebayCategoryItems}</td>
            <td>{(Number(item.listingInfo[0].watchCount).toFixed(0)) >= 0 ? (Number(item.listingInfo[0].watchCount)) : 0}</td>
            <td>{(Number(item.sellingStatus[0].currentPrice[0].__value__)).toFixed(2)}</td>
            <td>{item.shippingInfo[0].shippingType[0]!=="NotSpecified" ? (Number(item.shippingInfo[0].shippingServiceCost[0].__value__).toFixed(2)) : 0.01}</td>
            <td>{item.shippingInfo[0].shippingType[0]!=="NotSpecified" ? (Number(item.shippingInfo[0].shippingServiceCost[0].__value__) + Number(item.sellingStatus[0].currentPrice[0].__value__)).toFixed(2) : (Number(item.sellingStatus[0].currentPrice[0].__value__)).toFixed(2)}</td>
            <td>{item.sellingStatus[0].sellingState=="EndedWithSales" ? "Sold" : "Not"}</td>
            <td>{item.listingInfo[0].listingType=="FixedPrice" ? "Fixed" : "Bid"}</td>
            <td>{moment(item.listingInfo[0].endTime, moment.ISO_8601).format("MM-DD-YYYY")}</td>
            <td>{item.sellerInfo[0].sellerUserName}</td>
            <td><a href={"https://www.ebay.de/sch/i.html?_from=R40&_sacat=0&LH_Complete=1&_nkw=" + item.itemId} target="_blank"><i className="fas fa-external-link-alt"></i></a></td>
          </tr>
        );
      }
    ));      
  }
    
  render () { 
    const {loading} = this.state;     
      return (
        <table className="tableStyle" id="table-to-xls">
          <TableHeader 
              list={this.createTableItems()}
          />
          <TableItems list={this.createTableItems()}/>
          <TableFooter/>
      </table>
      );
  }
}


// TableHeader component

import React from 'react';

class TableHeader extends React.Component {

  render () {
    var itemList = this.props.list;
  
    return (
        <thead>
          <tr>
            <th>Lp.</th>
            <th>Photo</th>
            <th>Title</th>
            <th>Category</th>
            <th>Category eBay</th>
            <th>Watchers</th>
            <th>Price</th>
            <th>Shipping</th>
            <th>Sum</th>
            <th>Status</th>
            <th>Type</th>
            <th>Date</th>
            <th>Seller</th>
            <th>Link</th>
          </tr>
        </thead>
    );
  };
};

export default TableHeader;

// Table body component 
import React from 'react';

class TableItems extends React.Component {
  render () {
    return (
      <tbody>
        {this.props.list}
      </tbody>
    );
  };
};

export default TableItems;

【问题讨论】：

标签： reactjs sorting html-table

【解决方案1】：

您需要在返回 itemList.map() 之前运行 itemList.sort()，但在我看来，您的问题是在 sort 函数中要做什么，因为您需要执行所有这些条件才能获得每个条件的最终值列。

如果你不确定这个功能是如何工作的，我建议你先看看MDN docs。

现在以观察者为例，你会做类似的事情

itemList.sort((a, b) => {
  const aWatchers = (Number(a.listingInfo[0].watchCount).toFixed(0)) >= 0 ? (Number(a.listingInfo[0].watchCount)) : 0
  const bWatchers = (Number(b.listingInfo[0].watchCount).toFixed(0)) >= 0 ? (Number(b.listingInfo[0].watchCount)) : 0
  if (a < b) {
    return -1
  }
  if (a > b) {
    return -1
  }
  return 0;
});

你先准备好你的数据，然后你可以做条件返回；

如果我误解了你的问题，请告诉我。

【讨论】：