javascript - 如何像我一样在排序时显示产品中的所有数据？

Question

我希望在对价格进行排序时能够显示产品中的所有属性。

<小时/>

输入数据:

const products = [
  {
    "index": 0,
    "isSale": true,
    "isExclusive": false,
    "price": "Rs.2000",
    "productImage": "product-1.jpg",
    "productName": "Striped shirt",
    "size": [
      "XS",
      "S",
      "L",
      "XL"
    ]
  },
  {
    "index": 1,
    "isSale": false,
    "isExclusive": false,
    "price": "Rs.1250",
    "productImage": "product-2.jpg",
    "productName": "Denim shirt",
    "size": [
      "XS",
      "S"
    ]
  },
  {
    "index": 2,
    "isSale": false,
    "isExclusive": true,
    "price": "Rs.1299",
    "productImage": "product-3.jpg",
    "productName": "Plain cotton t-shirt",
    "size": [
      "S",
      "M"
    ]
  },
  {
    "index": 3,
    "isSale": false,
    "isExclusive": false,
    "price": "Rs.1299",
    "productImage": "product-4.jpg",
    "productName": "Plain 3/4 sleeve cotton t-shirt",
    "size": [
      "XL"
    ]
  },
  {
    "index": 4,
    "isSale": false,
    "isExclusive": false,
    "price": "Rs.2500",
    "productImage": "product-5.jpg",
    "productName": "White dress shirt",
    "size": [
      "M",
      "L"
    ]
  },
  {
    "index": 5,
    "isSale": false,
    "isExclusive": false,
    "price": "Rs.2399",
    "productImage": "product-6.jpg",
    "productName": "Long Sleeve Skivvy Top",
    "size": [
      "XS",
      "S",
      "M"
    ]
  },
  {
    "index": 6,
    "isSale": true,
    "isExclusive": false,
    "price": "Rs.2000",
    "productImage": "product-7.jpg",
    "productName": "Puffer Vest with Hood",
    "size": [
      "M",
      "L",
      "XL"
    ]
  },
  {
    "index": 7,
    "isSale": false,
    "isExclusive": true,
    "price": "Rs.1699",
    "productImage": "product-8.jpg",
    "productName": "Funnel Neck Swing Top",
    "size": [
      "XS",
      "S",
      "XL"
    ]
  }
];

<小时/>

 import React, { Component } from 'react';
    import { render } from 'react-dom';
    import products from './products';

    class App extends Component {

      state = {
        products,
        prices: [],
      }

      componentDidMount() {
        const { products, prices} = this.state;

        prices = products.map(p => p.price.substr(3));
        this.setState({ prices })
      }

      sortAscending = () => {
        const { prices } = this.state;
        prices.sort((a, b) => a - b)    
        this.setState({ prices })
      }

      sortDescending = () => {
        const { prices } = this.state;
        prices.sort((a, b) => a - b).reverse()
        this.setState({ prices })
      }

      render() {
        const { prices } = this.state;
        return (
          <div>
            <ul>
              {
                prices.map((p, i) => {
                  return <li>{i} - Rs.{p}</li>;
                })
              }
            </ul>
            <button onClick={this.sortAscending}>asc</button>
            <button onClick={this.sortDescending}>desc</button>
          </div>
        );
      }
    }

    render(<App />, document.getElementById('root'));

Answer 1

您可以对 products 数组进行排序，而不仅仅是对价格进行排序，然后只需添加需要在表中显示的属性。

class App extends Component {
  state = {
    products,
  }

  sort = (direction) => () => {
    const { products } = this.state;
    const sorted = products.sort((a, b) => {
      const priceA = a.price.substr(3);
      const priceB = b.price.substr(3);

      if (direction === 'asc') {
        return priceA - priceB;
      }

      return priceB - priceA;
    });

    this.setState({ products: sorted });
  }

  render() {
    const { products } = this.state;

    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Product</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            {
              products.map(({
                productName,
                price,
              }, i) => (
                <tr key={i}>
                  <td>{productName}</td>
                  <td>{price}</td>
                </tr>
              ))
            }
          </tbody>
        </table>
        <button onClick={this.sort('asc')}>asc</button>
        <button onClick={this.sort('desc')}>desc</button>
      </div>
    );
  }
}

StackBlitz 演示:https://stackblitz.com/edit/react-wtgnpd