Javascript 无法对react中的对象数组进行排序

我试图在按下按钮时按字母顺序对数组排序，但到目前为止，我尝试的所有操作都失败了。该按钮和功能在我尝试在控制台上记录一些东西并在控制台中打印时起作用。我觉得我的排序功能是错误的，但我不知道该怎么办。我如何修复此问题，使其正常工作

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;

试试这个

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 });
  }

试试这个

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 });
  }

这不是处理字符串的方式

它应该返回以下三个选项之一：

如果A.value大于b.value，则为正数。 如果b.value大于A.value，则为负数。 如果a.value==b.value，则为0 所以在你的情况下，应该是这样的：

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

请记住，排序就是在适当的位置对元素进行排序。

这不是处理字符串的方式

它应该返回以下三个选项之一：

如果A.value大于b.value，则为正数。 如果b.value大于A.value，则为负数。 如果a.value==b.value，则为0 所以在你的情况下，应该是这样的：

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

---

请记住，排序是对元素进行就地排序，您是否尝试过删除const{breweries}=this.state；并且直接用map函数调用state，所以不要用{breweries.slice0，10.map尝试这个。state.breweries.slice0，10.mapIt不起作用。您是否尝试过删除const{breweries}=this.state；直接用map函数调用state，所以不要用{breweries.slice0，10.map尝试这个。state.breweries.slice0，10.mapIt不起作用