如何在 React 中对此进行排序？我在这里做错了什么，可能是语法上的

Question

我需要在 React 中按"喜欢"对项目列表进行排序。我在这项任务中遇到了很多困难。当列表处于默认排序时，该程序可以工作，但是当我按"喜欢"排序时，我开始抛出错误。我已经尝试了一百万件事，但无济于事。它可能与数据类型(数组与对象(或可能与传播运算符有关，但您的猜测与我的一样好。我目前正在获得

"类型错误： 无法读取未定义的属性'映射'">

但我觉得这不是这里的主要问题，而是由此产生的错误。以下是来源：

import React, {Component} from 'react';
import { List } from 'semantic-ui-react';
import ItemsListItem from './ItemsListItem';
class ItemsList extends Component {
constructor(props) {
super(props);
this.state = {sorted: false}
}
compareItems() {
return function (a, b) {
if (a.likes < b.likes) return -1;
if (a.likes > b.likes) return 1;
return 0;
};
}
sortList(list = this.props){
if (!this.state.sorted){
//problem area
let listCopy = [...list];
listCopy.sort(this.compareItems())
//problem area
return listCopy;
}else{
debugger
return list
}
}
sortStatus() {
this.setState({sorted: !this.state.sorted});
}
render(){
const { items } = this.sortList(this.props)
return (
<div>
<List className="center">
{items.map((item, i) =>
<ItemsListItem item={item} key={i}/>
)}
</List>
<button className="ui red button" onClick={() => this.sortStatus()}>
Sort
</button>
</div>
)
}
}
export default ItemsList;

。和一个示例项目：

[  
{  
"id":1,
"name":"Hamburger",
"category":"Entrees",
"created_at":"2018-09-20T02:44:04.030Z",
"updated_at":"2018-10-05T04:03:13.458Z",
"likes":4,
"ingredients":[  
{  
"id":1,
"name":"Bun",
"item_id":1,
"created_at":"2018-09-20T02:44:04.070Z",
"updated_at":"2018-09-20T02:44:04.070Z"
},
{  
"id":2,
"name":"Beef Patty",
"item_id":1,
"created_at":"2018-09-20T02:44:04.088Z",
"updated_at":"2018-09-20T02:44:04.088Z"
},
{  
"id":3,
"name":"Lettuce",
"item_id":1,
"created_at":"2018-09-20T02:44:04.106Z",
"updated_at":"2018-09-20T02:44:04.106Z"
},
{  
"id":4,
"name":"Tomato",
"item_id":1,
"created_at":"2018-09-20T02:44:04.125Z",
"updated_at":"2018-09-20T02:44:04.125Z"
},
{  
"id":5,
"name":"Onion",
"item_id":1,
"created_at":"2018-09-20T02:44:04.143Z",
"updated_at":"2018-09-20T02:44:04.143Z"
}
]
},
...
]

编辑：解决方案：

import React, {Component} from 'react';
import { List } from 'semantic-ui-react';
import ItemsListItem from './ItemsListItem';
class ItemsList extends Component {
constructor(props) {
super(props);
this.state = {sorted: false}
}
compareItems() {
return function (a, b) {
if (a.likes < b.likes) return -1;
if (a.likes > b.likes) return 1;
return 0;
};
}
sortList(list) {
if (!this.state.sorted){
let listCopy = [...list];
listCopy.sort(this.compareItems())
return listCopy;
}else{
return list
}
}
sortStatus() {
this.setState({sorted: !this.state.sorted});
}
render(){
const { items } = this.props
let itemsUsable = this.sortList(items)
return (
<div>
<List className="center">
{itemsUsable.map((item, i) =>
<ItemsListItem item={item} key={i}/>
)}
</List>
<button className="ui red button" onClick={() => this.sortStatus()}>
Sort
</button>
</div>
)
}
}
export default ItemsList;

Answer 1

以下是要更改的内容：

sortList(list = this.props){
if (!this.state.sorted){

更改为：

sortList() {
const { list } = this.props
if (!this.state.sorted){

然后当你调用sortList函数时，不要传入参数，我认为你需要从你的items变量周围删除{}- 不确定它为什么在那里？

const { items } = this.sortList(this.props)

更改为：

const items = this.sortList()

说明：首先，如果要调用属于对象实例的函数，则无需将该对象的属性作为参数传递到该函数中。只需直接从函数内部获取它们(即，在本例中从sortList函数中获取(，并且没有任何参数。

其次，从this.props解构参数，就像你在sortList(list = this.props){中尝试的那样，不是有效的语法。