Как отсортировать таблицу извлеченных данных в реагировать - PullRequest
Новая
       5

Как отсортировать таблицу извлеченных данных в реагировать

0 голосов
/ 06 ноября 2018

Я создал таблицу с данными, полученными с сервера, и пытаюсь ее отсортировать, но не знаю, как получить доступ к определенным данным. Например, как отсортировать строки по продажной цене или количеству наблюдателей. Обычно я видел объект, который довольно легко сортировать относительно легкого доступа к ключам и значениям, но я борюсь с необработанными путями, связывающими мой код с 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;

1 Ответ

0 голосов
/ 06 ноября 2018

Вам нужно запустить itemList.sort () перед возвратом itemList.map (), но мне кажется, что ваша проблема в том, что делать внутри функции сортировки, потому что вам нужно выполнить все эти условия, чтобы получить окончательное значение каждого колонка.

Сначала я рекомендую вам взглянуть на Документы MDN , если вы не уверены, как работает эта функция.

Теперь для сортировки по наблюдателю, например, вы будете делать что-то подобное 

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

Сначала вы подготавливаете свои данные, после чего вы можете выполнить условия возврата;

Если я неправильно понял вашу проблему, пожалуйста, дайте мне знать.

...