React JS 按升序和降序排序

Question

我一直在使用来自lodash 的sortBy，但一直在使用

./src/components/Product.js
Syntax error: Unexpected token (17:29)

  15 |       sortByPrice() {
  16 |         this.setState(prevState => ({
> 17 |           sortBy(prevState, ['price'])
     |                              ^
  18 |         }));
  19 |       }
  20 |

这是我的组件，我想在其中根据对象的价格对对象数组进行排序。 this.state 里面 return() 给了我一个数组，所以这似乎工作，我只需要让 sortByPrice() 工作

import React, { Component } from 'react'
import sortBy from 'lodash/sortBy'
import './Product.css'
import products from '../offers.json'


class Product extends Component {

  constructor(props) {
    super(props)
    this.state = { products }
    this.sortByPrice = this.sortByPrice.bind(this);
  }

  sortByPrice() {
    this.setState(prevState => ({
      sortBy(prevState, ['price'])
    }));
  }

  render() {
    return (
      <div className="Product">
      <a href="#" onClick={this.sortByPrice}>
      Click me
      </a>
      <br />
      { products.map((product, index) =>
        <div key ={index} className="card">
        <img src={ product.product.details.image } alt={ product.product.details.ean }/>
        <h3>Prijs: { product.price } Euro</h3>
        <p>Staat: { product.description }</p>
        <p>Verkoper: { product.user.details.firstname }</p>
        </div>
      )}
      </div>
    )
  }
}
export default Product

更新

原来我试图在对象上调用sortBy()，这导致了错误。实现了这个并且错误消失了，现在我只需要找到一种方法来管理我的状态并重新渲染视图

this.setState(prevState => {
    { products: sortBy(prevState.products, ['price']) }
});

更新 2

在与一些朋友交谈后，我被建议完全放弃 lodash。我只是自己编写函数，将绑定添加到构造函数并在 ASC 和 DESC 按钮的 onClick 中调用函数。

import React, { Component } from 'react'
import './Product.css'
import products from '../offers.json'

class Product extends Component {

  constructor(props) {
    super(props)
    this.state = { products }
    this.sortByPriceAsc = this.sortByPriceAsc.bind(this);
    this.sortByPriceDesc = this.sortByPriceDesc.bind(this);
  }

  sortByPriceAsc() {
    this.setState(prevState => {
      this.state.products.sort((a, b) => (a.price - b.price))
  });
  }

  sortByPriceDesc() {
    this.setState(prevState => {
      this.state.products.sort((a, b) => (b.price - a.price))
  });
  }

  render() {
    return (
      <div>
      Sorteren:
        <button onClick={this.sortByPriceAsc}>
          ASC
        </button>
        <button onClick={this.sortByPriceDesc}>
          DESC
        </button>
      <div className="product">
      { this.state.products.map((product, index) =>
        <div key ={index} className="card">
          <img src={ product.product.details.image } alt={ product.product.details.ean }/>
          <h3>Prijs: { product.price } Euro</h3>
          <p>Staat: { product.description }</p>
          <p>Verkoper: { product.user.details.firstname }</p>
        </div>
      )}
      </div>
      </div>
    )
  }
}
export default Product

Answer 1

我想你想要这个：

this.setState(prevState => {
  return sortBy(prevState, ['price'])
});

（删除块周围多余的括号，我认为您需要return？）

更新

如果你去掉花括号，我认为你可以去掉 return：

this.setState(prevState => sortBy(prevState, ['price']));

更新 2

正如上面的评论者所指出的，您还需要传递实际的数组。我的回答可能会让您开始运行代码，但在您对状态对象的正确成员进行排序之前，它仍然不会执行您想要的操作。

更新 3

把它们放在一起，我相信这应该可以解决语法错误并实际进行您想要做的排序：

this.setState(prevState => {
    { products: sortBy(prevState.products, ['price']) }
});

Answer 2

工作代码：

    import React, { Component } from 'react'
    import './Product.css'
    import products from '../offers.json'

    class Product extends Component {

      constructor(props) {
        super(props)
        this.state = { products }
        this.sortByPriceAsc = this.sortByPriceAsc.bind(this);
        this.sortByPriceDesc = this.sortByPriceDesc.bind(this);
      }

      sortByPriceAsc() {
        this.setState(prevState => {
          this.state.products.sort((a, b) => (a.price - b.price))
      });
      }

      sortByPriceDesc() {
        this.setState(prevState => {
          this.state.products.sort((a, b) => (b.price - a.price))
      });
      }

      render() {
        return (
          <div>
          Sorteren:
            <button onClick={this.sortByPriceAsc}>
            Aflopend
            </button>
            <button onClick={this.sortByPriceDesc}>
            Oplopend
            </button>
          <div className="Product">
          { this.state.products.map((product, index) =>
            <div key ={index} className="card">
              <img src={ product.product.details.image } alt={ product.product.details.ean }/>
              <h3>Prijs: { product.price } Euro</h3>
              <p>Staat: { product.description }</p>
              <p>Verkoper: { product.user.details.firstname }</p>
            </div>
          )}
          </div>
          </div>
        )
      }
    }
    export default Product

Answer 3

按价格升序和降序对数组进行排序-

      sortByPriceAsc=()=>{

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

          this.setState({
              products:sortedProductsAsc
          })
      }


      sortByPriceDsc=()=>{

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

          this.setState({
              products:sortedProductsDsc
          })
      }

Answer 4

所以在这里，当我们点击按钮或图标时，我们按升序或降序对 DATA 进行排序。我在这里使用 React Hooks。

• JavaScript 中的 sort() 方法对数组的元素进行排序
• sort() 覆盖原始数组。
• 语法：array.sort(compareFunction)
• sort() 方法比较两个值时，会将值发送到比较函数，并根据返回的（负、零、正）值对值进行排序。

示例：

比较 20 和 100 时，sort() 方法调用比较函数 (20,100)。该函数计算 20-100，并返回 -80（负值）。 sort 函数会将 20 排序为小于 100 的值。

所以，在 handleSort() 函数中，我们正在从 DATA 创建新数组，这样如果我们使用相同的数组，react 可以更新状态，所以 react 什么都不考虑更改我们只是指向同一个数组，这就是为什么我们需要使用新数组更新状态，以便 React 知道状态已更改并且它将重新渲染组件。

import React, { useState } from "react";

const App = () => {
  const [MyArray, setMyArray] = useState([]);
  const [sortStatus, setSortStatus] = useState(true);

  const handleSort = () => {
    const data = MyArray;
    if (sortStatus) {
        let sorted = data.sort((a, b) => a[1] - b[1]);
        setMyArray(sorted);
        setSortStatus(!sortStatus);
    } else {
        let sorted = data.sort((a, b) => b[1] - a[1]);
        setMyArray(sorted);
        setSortStatus(!sortStatus);
    }
  }

 return (
   <>
     <button onClick={handleSort}>ClickMe to Sort</button>
          {/* SHOW YOUR ARRAY here TO SEE THE CHANGES ONCLICK */}
   </>
   )
 }