Je construis une grille de film qui renvoie leur identifiant, la vignette, le titre, le numéro d'épisode et la date relâchée.
Comment mapper Réorderbydate () & réorderbypisode () Méthodes pour les valeurs de rétention de retour? P>
Codesandbox Démo & Documentation API Swapi P>
Films.js Composant: strong> p> import React, { Component } from 'react';
import axios from 'axios';
import ListFilms from './ListFilms'
class Films extends Component {
constructor(props) {
super(props);
this.state = {
films: [],
}
this.getFilms = this.getFilms.bind(this)
}
getFilms() {
return axios.get('https://swapi.co/api/films')
...
})
}
reorderByDate = () => {
let films = this.state.films.map(item => ({ ...item }));
films.sort((a, b) =>
a.release_date > b.release_date
? 1
: b.release_date > a.release_date
? -1
: 0
);
this.setState({ films });
};
reorderByEpisode = () => {
let films = this.state.films.map(item => ({ ...item }));
films.sort((a, b) =>
a.episode_id > b.episode_id ? 1 : b.episode_id > a.episode_id ? -1 : 0
);
this.setState({ films });
};
componentWillMount(){
this.getFilms();
}
render() {
const { films } = this.state;
return(
<div className="container">
<div className="d-flex justify-content-center align-items-center mb-2">
<p className="mb-0 mr-2">Filter by:</p>
<button onClick={this.reorderByDate} type="button" className="btn btn-warning btn-sm">Released Date</button>
<p className="mb-0 mx-2">or:</p>
<button onClick={this.reorderByEpisode} type="button" className="btn btn-warning btn-sm">Episode Number</button>
</div>
<ListFilms films={films} />
</div>
)
}
};
export default Films;
3 Réponses :
Pour résoudre le scénario actuel, vous pouvez utiliser à l'intérieur de la fonction, utilisez Reportez-vous HTTPS: // Developer. mozilla.org/en-us/docs/web/javascript/reference/global_Objects/array/sort
Vous devez utiliser onclick () les auditeurs sur les boutons et utiliser l'opérateur de flèche ou la fonction de liaison à ceci
array.pototype.sort Pour implémenter la logique personnalisée pour le tri basé sur la date ou le numéro d'épisode
this.setstate (prevstate => NEXTESTATE) Syntaxe fonctionnelle car vous essayez de mettre à jour la matrice de films à partir de l'objet d'état d'extinction à une matrice triée et de re-rendu
Mais j'ai fait ce que vous dites et ajoutez des événements OnClick et des fonctions des flèches. Maintenant, je bloque la traduction pour obtenir des valeurs de films à l'intérieur des méthodes.
Voici un exemple de tri des films par version_date .Ce est une idée de base que vous pouvez l'utiliser pour trier sur une autre base. Ajouter rendubydate () à films et le bouton dans films conteneur pour appeler la méthode
Veuillez utiliser le code mis à jour de https://codesandbox.io/s/zn923169mx
reorderByDate = () => {
let films = this.state.films;
// let films = this.state.films;
//console.log("from real",films[0].release_date);
films = films.sort((a, b) => {
let date1 = new Date(a.release_date).getTime();
let date2 = new Date(b.release_date).getTime();
console.log(date1);
return date1 - date2;
});
this.setState({ films });
};
reorderByEpisode = () => {
// console.log(...films.episode_id);
let films = this.state.films;
films = films.sort(function(a, b) {
return a.episode_id - b.episode_id;
});
this.setState({ films });
};
Simplement trier le tableau des films de l'état, passez la valeur renvoyée à Films Prop
Dupliqué possible de Comment trier les objets JavaScript Basé sur leurs propriétés, spécifier la propriété et trier des objets de la valeur de la propriété String et Tri de l'objet JavaScript par la valeur de la propriété
Vous recherchez une solution comme celle-ci codesandbox.io/s/r5o56mz2zn ? Vous devez trier les films pour les problèmes
Thks! Je reconstruisons des méthodes de réorganisation comme des fonctions arrow pour résoudre un problème de la portée des films.