Javascript 如何在Reactjs中按升序或降序对数据进行排序？

我在displaycomponent中导入了产品数据。对于JSON中的每个产品，我都使用

.map（）

来显示内容。现在我想按升序或降序对产品价格进行排序，但我不能这样做

products.js：

 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"]
  }];

  export default products;

现在在displaycomponent中，我映射并显示每个产品

displaycomponent.js：

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

class App extends Component {

    constructor(){
        super();
        this.state = {
            sortDirection: 'descending',
            data: this.state.data.sort(descending)
        };
    }

    sortData() {
        if(this.state.sortDirection ==='descending') {
            this.setState({ 
                sortDirection: 'ascending',
                data: this.props.payYears.sort(sortAscending)
            });
        } else {
            this.setState({ 
                sortDirection: 'descending',
                data: this.props.payYears.sort(sortDescending)
            });
        }
    }

  render() {
    return (
      <div>
        <h1>This is display component</h1>

        <ul>
                {
                  products.map(product => {
                    return <li>{product.index} - {product.price}</li>;
                  })
                }
            </ul>

      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“./产品”进口产品；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
sortDirection:'下降'，
数据：this.state.data.sort（降序）
};
}
sortData（）{
if（this.state.sortDirection=='descending'）{
这个.setState（{
sortDirection:'升序'，
数据：this.props.payYears.sort（排序）
});
}否则{
这个.setState（{
sortDirection:'下降'，
数据：this.props.payYears.sort（sortdescenting）
});
}
}
render（）{
返回(
这是显示组件

{
products.map（product=>{
返回
{product.index}-{product.price}
；
})
}

);
}
}
导出默认应用程序；

下面的屏幕截图显示了显示的初始价格顺序：

---

您没有显示排序函数的外观。我会这样定义它们：

// a and b are single "product"

const ascending = (a, b) => {
  const parsedA = parseInt(a.price.replace("Rs.", ""), 10);
  const parsedB = parseInt(b.price.replace("Rs.", ""), 10);

  return a - b;
}

const descending = (a, b) => {
  const parsedA = parseInt(a.price.replace("Rs.", ""), 10);
  const parsedB = parseInt(b.price.replace("Rs.", ""), 10);

  return b - a;
}

排序修改数组，因此您需要创建副本：

sortData() {
    if(this.state.sortDirection ==='descending') {
        this.setState({ 
            sortDirection: 'ascending',
            data: this.props.payYears.slice().sort(sortAscending)
        });
    } else {
        this.setState({ 
            sortDirection: 'descending',
            data: this.props.payYears.slice().sort(sortDescending)
        });
    }
}

---

像这样的东西应该是你要找的

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

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./产品”进口产品；
类应用程序扩展组件{
状态={
产品，
价格：【】，
}
componentDidMount（）{
const{products，prices}=this.state；
价格=产品.map（p=>p.price.substr（3））；
this.setState（{prices}）
}
排序设置=（）=>{
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；
返回(

{
价格.map（（p，i）=>{
返回
{i}-Rs.{p}
；
})
}

asc
描述
);
}
}
render（，document.getElementById（'root'））；

按价格升序排序数组-

      this.sortByPriceAsc=()=>{

          let sortedProductsAsc;
          sortedProductsAsc= this.state.products.sort((a,b)=>{
             return parseInt(a.price)  - parseInt(b.price);
          })

          this.setState({
              products:sortedProductsAsc
          })
      }

      this.sortByPriceDsc=()=>{

          let sortedProductsDsc;
          sortedProductsDsc= this.state.products.sort((a,b)=>{
             return parseInt(b.price)  - parseInt(a.price);
          })

          this.setState({
              products:sortedProductsDsc
          })
      }

按价格降序排序数组-

      this.sortByPriceAsc=()=>{

          let sortedProductsAsc;
          sortedProductsAsc= this.state.products.sort((a,b)=>{
             return parseInt(a.price)  - parseInt(b.price);
          })

          this.setState({
              products:sortedProductsAsc
          })
      }

      this.sortByPriceDsc=()=>{

          let sortedProductsDsc;
          sortedProductsDsc= this.state.products.sort((a,b)=>{
             return parseInt(b.price)  - parseInt(a.price);
          })

          this.setState({
              products:sortedProductsDsc
          })
      }

---

这样行吗@科林的作品非常完美。谢谢：）@Colin你能复制粘贴代码作为答案吗：）当然，我现在就做。