如何在ReactJS中对映射循环中的值进行排序

Question

我正在学习React JS，为此我正在复制我用PHP开发的网站。我到了一定的地步，出现了一个我在互联网搜索中找不到的问题。我正在使用Axios从数据库中获取数据，并将其显示在前端。结果是我创建了一个State，并使用map((创建一个循环，到目前为止还不错，但我想根据map((返回的值对这个结果进行排序。

我有一个名为"选票"的字段的返回，我想用它来对结果进行排序。

遵循代码

App.js

class App extends Component {
state = {
places: []
};
componentDidMount() {
axios
.get('http://localhost:1337/places/')
.then((res) => this.setState({ places: res.data }));
}
render() {
console.log(this.state.places[0]);
return (
<Fragment>
<Header />
<section id='places'>
<div className='container'>
<Places places={this.state.places} />
</div>
</section>
</Fragment>
);
}
}

Places.js

class Places extends Component {
render() {
return this.props.places
.sort((a, b) => a.votos > b.votos)
.map((place) => (
<div className='row' key={place.id}>
<div className='col-lg-4'>
<Card key={place.id} place={place} />
</div>
</div>
));
}
}

我甚至尝试过使用sort((，但我不知道如何选择一个特定的字段作为sort(

感谢

Answer 1

您离它不远了。sort需要返回数字，而不是布尔值：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

.sort((a, b) => {
if (a.votos > b.votos) {
return 1
}
if (a.votos < b.votos) {
return -1
}
// they are equal
return 0
})

如果votos是一个int，你可以像这样返回a.votos-b.votos：

.sort((a, b) => a.votos - b.votos)

Answer 2

您不能使用>或<登录排序。As sort期望每次迭代都返回一个数字。欲了解更多信息，请阅读MDN文档，

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

若投票属性为数字，则可以使用以下代码。它将按升序对数组进行排序。

.sort((a, b) => a.votos - b.votos)

如果您的投票属性是字符串，您可以使用如下三元运算符代码，如

.sort((a, b) => a.votos > b.votos ? 1 : -1)

Answer 3

代替a.votos>b.votos。使用a.votos-b.votos.

class Places extends Component {
render() {
return this.props.places
.sort((a, b) => a.votos - b.votos)
.map((place) => (
<div className='row' key={place.id}>
<div className='col-lg-4'>
<Card key={place.id} place={place} />
</div>
</div>
));
}
}

以下是来自MDN:的更多信息

• 如果提供compareFunction，则所有未定义的数组元素都会根据比较函数的返回值进行排序(所有未定义元素都会排序到数组的末尾，不调用compareFunction(。如果a和b是被比较的两个元素，那么：

• 如果compareFunction(a，b(返回的值小于0，则将a排序为低于b的索引(即a先到(。

• 如果compareFunction(a，b(返回0，则使a和b彼此保持不变，但根据所有不同的元素进行排序。注意：ECMAscript标准并不保证这种行为，因此，并非所有浏览器(例如，至少可以追溯到2003年的Mozilla版本(都尊重这一点。

• 如果compareFunction(a，b(返回的值大于0，则将b排序为低于a的索引(即b排在第一位(。当给定一对特定的元素a和b作为其两个参数时，compareFunction(a，b(必须始终返回相同的值。如果返回不一致的结果，则排序顺序未定义。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort