Question

我需要在React中按“喜欢”对项目列表进行排序。我在完成这项任务时遇到很多困难。该程序在列表为默认排序时起作用，但是当我按“喜欢”排序时，我开始抛出错误。我已经尝试了100万件事，但没有成功。它可能与数据类型（数组与对象）或散布运算符有关，但您的猜测与我的一样好。我目前正在

“ TypeError：无法读取未定义的属性'map'”

但是我觉得这不是这里的主要问题，而是由此引起的错误。来源：

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){破坏参数是无效的语法。

我该如何在React中排序？我在这里做错了，可能在语法上

1 个答案: