我在数组中有一个用户对象列表。我想根据选定的参数(例如年龄,等级等)对数组中的不同用户进行排序。我创建了一些函数,这些函数将用于让用户选择如何对用户进行排名。我正在尝试进行过滤功能,但它们没有按我预期的那样工作。这是我的react组件:
export default class Table extends Component {
constructor(props) {
super(props);
this.state = {
users: usersJSON,
sort: this.props.filter
}
console.log(this.state.users)
}
componentWillReceiveProps() {
}
// complete the comparators
compareByAge(a, b) {
}
compareByName(a, b) {
}
compareByPoints(a, b) {
}
compareByRank(a, b) {
}
render() {
return (<div>
<table className='table table-striped'>
<thead>
<tr key='head'>
<th>Age</th>
<th>Name</th>
<th>Points</th>
<th>Rank</th>
</tr>
</thead>
<tbody>
{
this.state.users.map((user, index) => {
return(
<tr key={index}>
<td>{user.age}</td>
<td>{user.name}</td>
<td>{user.points}</td>
<td>{user.rank}</td>
</tr>
)
})
}
</tbody>
</table>
</div>)
}
}
我尝试过:
compareByAge(a, b) {
if(a < b){
return -1
}
if(a = b){
return 0
}
if(a > b){
return 1
}
}
compareByName(a, b) {
if(a < b){
return -1
}
if(a = b){
return 0
}
if(a > b){
return 1
}
}
compareByPoints(a, b) {
if(a < b){
return -1
}
if(a = b){
return 0
}
if(a > b){
return 1
}
}
compareByRank(a, b) {
if(a < b){
return -1
}
if(a = b){
return 0
}
if(a > b){
return 1
}
}
这是用户对象
[ { rank: 3, points: 3123, name: 'Marlana J. Huff', age: 41 },
{ rank: 10, points: 45345, name: 'Susan D. Jimenez', age: 42 },
{ rank: 14, points: 312, name: 'Richard M. Mass', age: 11 },
{ rank: 13, points: 3124, name: 'Joan T. Covert', age: 13 },
{ rank: 20, points: 31, name: 'Joseph S. Perez', age: 23 },
{ rank: 19, points: 6546, name: 'John R. Green', age: 24 },
{ rank: 9, points: 452, name: 'Elizabeth R. Olsen', age: 15 },
{ rank: 1, points: 134, name: 'Sharon R. Ryan', age: 25 },
{ rank: 24, points: 64563, name: 'Stacey D. Ward', age: 30 },
{ rank: 2, points: 755463, name: 'George K. Pancoast', age: 35 },
{ rank: 18, points: 42342, name: 'Dorothy J. Carroll', age: 33 },
{ rank: 23, points: 1241, name: 'Louis E. McCrae', age: 65 },
{ rank: 15, points: 654645, name: 'Camille B. Burton', age: 17 },
{ rank: 4, points: 5345345, name: 'Tommye R. Robinson', age: 18 },
{ rank: 17, points: 342, name: 'Grace C. Smith', age: 19 },
{ rank: 22, points: 213, name: 'Jennifer C. West', age: 20 },
{ rank: 25, points: 34242, name: 'John L. Sandlin', age: 21 },
{ rank: 21, points: 52342, name: 'Margarita D. Lambert', age: 43 },
{ rank: 5, points: 42342, name: 'Thomas M. Hawkins', age: 32 },
{ rank: 8, points: 354, name: 'Joseph J. Freeman', age: 22 },
{ rank: 6, points: 7675, name: 'Arlene R. Grimes', age: 29 },
{ rank: 7, points: 274, name: 'Michael E. Rogers', age: 10 },
{ rank: 12, points: 105, name: 'Alice J. Goldsmith', age: 37 },
{ rank: 16, points: 18978, name: 'Robert O. Lambert', age: 40 },
{ rank: 11, points: 103596, name: 'Felix M. Seeber', age: 39 } ]
答案 0 :(得分:0)
如果您希望默认情况下按年龄对它进行排序,则可以直接将其设置为以下状态:
this.state = {
users: usersJSON.sort(this.compareByAge),
sort: this.props.filter
}
尝试使用此功能
compareByName(a, b) {
if(a.name < b.name){
return -1
}
if(a.name == b.name){ // you were making mistake here by a = b instead of a==b
return 0
}
if(a.name > b.name){
return 1
}
}
compareByAge(a, b) {
if(a.age < b.age){
return -1
}
if(a.age == b.age){
return 0
}
if(a.age > b.age){
return 1
}
}
compareByPoints(a, b) {
if(a.points < b.points){
return -1
}
if(a.points == b.points){
return 0
}
if(a.points > b.points){
return 1
}
}
compareByRank(a, b) {
if(a.rank < b.rank){
return -1
}
if(a.rank == b.rank){
return 0
}
if(a.rank > b.rank){
return 1
}
}
答案 1 :(得分:0)
下面的功能代码通过 currying 调用一系列功能。因此语法看起来有些奇怪。要使用此功能代码,请先调用sort
,然后再调用两组括号。第一组包含对数据数组的引用,第二组包含表示要排序的“键”的字符串。一旦获得排序后的数据,就可以使用setState()
将排序后的列表放入您的users
状态变量中。
因此sort(data)('name');
将通过键data
对名为name
的对象数组进行排序。您将在下面的console.log()
中看到函数调用:
const data = [ { rank: 3, points: 3123, name: 'Marlana J. Huff', age: 41 }, { rank: 10, points: 45345, name: 'Susan D. Jimenez', age: 42 }, { rank: 14, points: 312, name: 'Richard M. Mass', age: 11 }, { rank: 13, points: 3124, name: 'Joan T. Covert', age: 13 }, { rank: 20, points: 31, name: 'Joseph S. Perez', age: 23 }, { rank: 19, points: 6546, name: 'John R. Green', age: 24 }, { rank: 9, points: 452, name: 'Elizabeth R. Olsen', age: 15 }, { rank: 1, points: 134, name: 'Sharon R. Ryan', age: 25 }, { rank: 24, points: 64563, name: 'Stacey D. Ward', age: 30 }, { rank: 2, points: 755463, name: 'George K. Pancoast', age: 35 }, { rank: 18, points: 42342, name: 'Dorothy J. Carroll', age: 33 }, { rank: 23, points: 1241, name: 'Louis E. McCrae', age: 65 }, { rank: 15, points: 654645, name: 'Camille B. Burton', age: 17 }, { rank: 4, points: 5345345, name: 'Tommye R. Robinson', age: 18 }, { rank: 17, points: 342, name: 'Grace C. Smith', age: 19 }, { rank: 22, points: 213, name: 'Jennifer C. West', age: 20 }, { rank: 25, points: 34242, name: 'John L. Sandlin', age: 21 }, { rank: 21, points: 52342, name: 'Margarita D. Lambert', age: 43 }, { rank: 5, points: 42342, name: 'Thomas M. Hawkins', age: 32 }, { rank: 8, points: 354, name: 'Joseph J. Freeman', age: 22 }, { rank: 6, points: 7675, name: 'Arlene R. Grimes', age: 29 }, { rank: 7, points: 274, name: 'Michael E. Rogers', age: 10 }, { rank: 12, points: 105, name: 'Alice J. Goldsmith', age: 37 }, { rank: 16, points: 18978, name: 'Robert O. Lambert', age: 40 }, { rank: 11, points: 103596, name: 'Felix M. Seeber', age: 39 } ]
let sort = (data) => (key) => [...data].sort((first, second) => first[key] > second[key]);
console.log(sort(data)('rank'));
console.log(sort(data)('points'));
console.log(sort(data)('name'));
console.log(sort(data)('age'));