无法对反应中的对象数组进行排序答案

【问题标题】：Cannot sort array of objects in react无法对反应中的对象数组进行排序
【发布时间】：2018-12-17 18:55:44
【问题描述】：

我试图在按下按钮时按字母顺序对数组进行排序，但到目前为止我尝试的一切都失败了。当我尝试控制台记录某些内容并在控制台中打印时，按钮和功能起作用。我觉得我的排序功能是错误的，但我不知道该怎么办。我该如何解决这个问题才能正常工作？

import React from "react";
import './Brewery.css'
import { Link } from 'react-router-dom';
import { ButtonToolbar, DropdownButton, MenuItem } from 'react-bootstrap';


class Brewery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMenu: false,
      breweries: []
    }
  }

  componentDidMount() {
    fetch("https://api.openbrewerydb.org/breweries")
      .then(response => response.json())
      .then((data) => {
        this.setState({
          breweries: data,
        })
      })
  }

  sortAlpha() {
    const breweries = [].concat(this.state.breweries)
    .sort((a, b) => a.name > b.name)
    this.setState({breweries:breweries});
  }

  render() {

    const { breweries } = this.state;

    return(
     <div className="main-container">
       <div className="banner" styles="background-image: linear-gradient(-225deg, rgba(0,101,168,0.6) 0%, rgba(0,36,61,0.6) 50%), url('http://bitterminnesotabrewerytours.com/wp-content/uploads/2014/02/boston-beer-tours-glass.jpg');">
         <div className="banner-content">
           <h1>Brewery</h1>
           <p>Find the best brewery in town</p>
         </div>
       </div>
       <div className="container">
         <div>
           <button onClick={() => this.sortAlpha()}>Sort Alphabetically</button>
         </div>
         <div className="row">
          {breweries.slice(0,10).map((brewery, i) =>
            <div className="col-xs-12 col-sm-4" key={i}>
              <Link to={`/brewery/${ brewery.id }`}>
                <div className="card">
                  <div className="card-description">
                    <h2>{brewery.brewery_type}</h2>
                    <p>{brewery.city}, {brewery.state}</p>
                  </div>
                  <div className="card-category"><img src="https://img.icons8.com/color/20/000000/beer.png"/>  {brewery.name}</div>
                </div>
              </Link>
            </div>
          )}
        </div>
      </div>
    </div>
    )
  }
}

export default Brewery;

【问题讨论】：

您是否尝试过删除const { breweries } = this.state; 并使用您的地图函数直接调用状态，而不是{breweries.slice(0,10).map() 尝试this.state.breweries.slice(0, 10).map()
不行

标签： javascript reactjs

【解决方案1】：

试试这个

sortAlpha() {
    const breweries = [...this.state.breweries].sort((a, b) => {
      if (a.name < b.name) return -1;
      if (a.name > b.name) return 1;
      return 0;
    });
    this.setState({ breweries: breweries });
  }

【讨论】：

【解决方案2】：

sort 不是这样处理字符串的。

它应该返回三个之一：

如果a.value 大于b.value，则为正数。
如果b.value 大于a.value，则为负数。
零 (0) 如果a.value == b.value

所以在你的情况下应该是这样的：

.sort((a, b) => {
  if (a.name < b.name) { return -1; }
  if (a.name > b.name) { return 1; }
  return 0;
});

请记住，sort 正在对元素进行就地排序（突变）

【讨论】：