javascript - 像我一样进行排序时，如何显示产品中的所有数据？(How do i display all the data in products while sorting like I've done?)

Question

I want to be able to display all the properties in products while i'm sorting the prices.

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

---

INPUT DATA:

(输入数据：)

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

  ask by Boateng Kweku Ampomah Frederic translate from so

Answer 1

等待大神答复