J'apprends React JS et pour cela je réplique un site Web que j'ai développé en PHP. Et je suis arrivé à un certain point qu'une question s'est posée que je ne trouve pas dans mes recherches sur Internet. J'utilise Axios pour prendre des données de la base de données et les présenter sur le front-end. le résultat je crée un état et utilise la carte () pour créer une boucle, jusqu'ici tout va bien, mais je voudrais ordonner ce résultat par une valeur qui est retournée par la carte ().
J'ai le retour de un champ appelé votes qui sont des nombres que je souhaite utiliser pour trier le résultat.
Suivez les codes
App.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>
));
}
}
Places.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>
);
}
}
J'ai même essayé d'utiliser sort (), mais je ne sais pas comment choisir un champ particulier à utiliser comme référence pour sort ()
Merci
3 Réponses :
Vous n’en étiez pas loin. sort attend des nombres renvoyés, pas des booléens: https://developer.mozilla.org/ fr-FR / docs / Web / JavaScript / Reference / Global_Objects / Array / sort
.sort((a, b) => a.votos - b.votos)
Si votos est un int, vous pouvez simplement renvoyer a.votos - b.votos like ceci:
.sort((a, b) => {
if (a.votos > b.votos) {
return 1
}
if (a.votos < b.votos) {
return -1
}
// they are equal
return 0
})
Merci Salmin. J'utilise .sort (a, b) => b.votes - a.votes et fonctionne.
Au lieu de a.votos> b.votos. Utilisez 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>
));
}
}
Voici quelques informations supplémentaires de MDN:
Si compareFunction est fourni, tous les éléments de tableau non indéfinis sont triés selon la valeur de retour de la fonction de comparaison (tous les éléments non définis sont triés jusqu'à la fin du tableau, sans appel à compareFunction). Si a et b sont deux éléments comparés, alors:
Si compareFunction (a, b) renvoie moins de 0, triez a en un index inférieur à b (c'est-à-dire que a vient en premier).
Si compareFunction (a, b) renvoie 0, laissez a et b inchangés l'un par rapport à l'autre, mais triés par rapport à tous les éléments différents. Remarque: la norme ECMAscript ne garantit pas ce comportement, par conséquent, tous les navigateurs (par exemple les versions de Mozilla datant d'au moins 2003) ne le respectent pas.
Si compareFunction (a, b) renvoie une valeur supérieure à 0, triez b en un index inférieur à a (c'est-à-dire que b vient en premier). compareFunction (a, b) doit toujours renvoyer la même valeur lorsqu'on lui donne une paire spécifique d'éléments a et b comme ses deux arguments. Si des résultats incohérents sont renvoyés, l'ordre de tri n'est pas défini.
https: / /developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
Salut Kyler. Utiliser a.votos - b.votos fait le tri, mais je veux du plus grand au plus petit, si je change l'ordre, cela fonctionnera-t-il? Tapez b.votes - a.votes? Merci d'avoir répondu.
Fonctionne, merci pour votre aide
Oui, utiliser b.votes - a.votes l'inverserait. Heureux que cela ait fonctionné.
Vous ne pouvez pas utiliser le tri de connexion> ou <. as sort s ce qu nombre soit renvoy chaque it pour plus d veuillez lire la documentation mdn> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
Si la propriété votes est un nombre, vous pouvez utiliser le code suivant . Il triera votre tableau par ordre croissant.
.sort((a, b) => a.votos > b.votos ? 1 : -1)
Si votre propriété votes est une chaîne, vous pouvez utiliser le code d'opérateur ternaire suivant comme celui-ci,
.sort((a, b) => a.votos - b.votos)
a.votos? Est-ce une faute de frappe? Je vous ai vu mentionné avantJ'ai le retour d'un champ appelé votes.Chenxsan Ce n'est que la traduction des votes dans ma langue (portugais), pour faciliter. Désolé pour ça