Javascript 数组的反应条件排序

我从redux状态获得一个值，我希望根据从状态获得的值有条件地对数组进行排序

目前我写这篇文章的方式如下：

class ProductsPage扩展组件{
状态={
productArrayFromBackend:[]，
productArrayToDisplay:[]
}
render（）{
让ProductArrayToProcess=[]
if（this.props.ProductFilter==“最新”）{
ProductArrayToProcess=this.state.productArrayToDisplay.sort（（a，b）=>（a.addedOn>b.addedOn？-1:1））
}else if（this.props.ProductFilter==“popular”）{
ProductArrayToProcess=this.state.productArrayToDisplay.sort（（a，b）=>（a.likes>b.likes？-1））
}
否则{
ProductArrayToProcess=this.state.productArrayToDisplay
}
返回(
{ProductArrayToProcess.map（（产品，i）=>）}
);
}
}

现在，

this.props.ProductFilter

的值来自state。我希望做的是，当redux状态中的值更改时，它也应该更改

jsx

中呈现的值

---

请告诉我这是如何实现的？

您只需在

render

函数中提取所需的数据即可

render(){
const {ProductFilter} = this.props;
// use ProductFilter in the following code using JSX
}

与多次调用

this.props.X

相比，在请求时只声明一次变量是更好的做法

此外，与直接从

状态调用更改项不同，您可能希望复制它们的值，并在此副本上进行更改

顺便说一句，我建议将
ProductArrayToProcess
生成导出到一个匹配的函数中，在那里您当然仍然可以访问
props
和
state
如何实现这一点？请让我知道。我感到困惑，无法对其进行排序。不清楚什么不起作用以及您正在尝试做什么。有条件地对一个数组进行排序从一般性审查-假设这段代码起作用，您能告诉我们对DOM的影响吗？数组排序会变异状态，这是react中的反模式。