Question

我一直在使用sortBy中的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内的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

工作代码：

    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 2

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

      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 3

我想你想要这个：

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

（删除块周围的额外括号，我认为你需要一个return？）

<强>更新

我认为如果你放下大括号，你可以放弃回报：

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

更新2

作为上述评论者指出，您还需要传递实际的数组。我的答案可能会让你运行代码，但在你对状态对象的正确成员进行排序之前，它仍然不会做你想做的事。

更新3

总而言之，我相信这应解决语法错误，并实际进行您想要的排序：

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

React JS按升序和降序排序

3 个答案: