我试图在按下按钮时按字母顺序对数组进行排序,但到目前为止我尝试的所有操作都失败了。当我尝试控制台记录某些内容并在控制台中打印时,按钮和功能起作用。我觉得我的排序功能是错误的,但我不知道该怎么办。我该如何修复这个问题才能正常工作?
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;
Try this
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 });
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)