Question

我已经创建了一个表，其中包含从服务器获取的数据，并且我试图对其进行排序，但不知道如何访问某些数据。例如，如何按售价或观察者数量对行进行排序。我通常看到的是一个易于访问键和值的易于分类的对象，但是我在将代码与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;

Answer 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;
});

您先准备好数据，然后再做返回的条件；

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

如何在ReactJS中对获取的数据表进行排序

1 个答案: