React JS 按升序和降序排序

我一直在使用sortBy from lodash，但继续得到

./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 inside 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

UPDATE

原来我是想打电话sortBy()on 和 object，这导致了错误。实现了这个并且错误消失了，现在我只需要找出一种方法来管理我的状态并重新渲染视图

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

UPDATE 2

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

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

工作代码：

    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