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

Question

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

"TypeError: Cannot read property 'map' of undefined"

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

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){ 中尝试做的那样，是无效的语法。