React JS 按升序和降序排序
Posted
技术标签:
【中文标题】React JS 按升序和降序排序【英文标题】：React JS sort by ascending and descending 【发布时间】：2017-11-16 02:04:25 【问题描述】：我一直在使用来自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
【问题讨论】：
sort 接受一个数组 -> 你给它一个包含数组的对象... 你说得对。 【参考方案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'])
);
【讨论】：
谢谢。这消除了错误，但它没有重新渲染我的视图。【参考方案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
【讨论】：
【参考方案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
)
【讨论】：
【参考方案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 */
</>
)
【讨论】：
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。以上是关于React JS 按升序和降序排序的主要内容，如果未能解决你的问题，请参考以下文章