J'ai une liste d'éléments extraites via l'API qui est triée par ordre alphabétique, mais je souhaite ajouter l'en-tête au-dessus des éléments de la liste. Par exemple, comme en dessous de la structure HTML
render(){
//code to get the letterkey, I am not sure how to put this in map function to render**
var letters = '', groups = {};
for (var i = 0, len; i < len; i++) {
var letterKey = brands[i].name.charAt(0).toLowerCase(); // get the first letter
if (letters.indexOf(letterKey) === -1) {
letters += letterKey;
groups[letterKey] = [brands[i]];
} else {
groups[letterKey].push([brands[i]]);
}
};
console.log(letters);
let brands = this.props.brands.all_brands
if (brands) brands.sort(this.dynamicSort("name"));
if (brands) len = brands.length
const filteredList = this.filterItems(brands, letters);
return (
<ul>
{filteredList}
</ul>
);
}
3 Réponses :
Après avoir regroupé les marques groupes = {A: [Apple, fourmi], B: [Babel, balle], ...} code> Vous pouvez itérer des groupes tels que Object.keys(groups).sort().map(letter, key => (
<div key={key}>
<h4>{letter}</h4>
<ul>
{
groups[letter].map((word, index) => (
<li key={index}>{word}</li>
))
}
</ul>
</div>
))
Préprocéder vos marques dans une carte {LetterKey: [Marques]} Pour utiliser dans la fonction Render. Carte Les entrées de [Touche, marques] à votre liste non ordonnée P> const brands = ['cca', 'ccb', 'ccc', 'bba', 'bbb', 'bbc', 'aaa', 'aab', 'aac'];
const groups = brands.reduce((groups, brand) => {
const letterKey = brand.charAt(0).toLowerCase();
(groups[letterKey] || (groups[letterKey] = [])).push(brand);
return groups;
}, {});
Object.entries(groups).sort().map(([letterKey, brands]) => {
console.log('KEY', letterKey);
brands.map(brand => console.log('\tbrand', brand));
});
Merci pour la réponse, j'ai déjà une structure JSON qui n'a pas de clé, donc je génère la première lettre de l'alphabet avec ce si (marques) len = marques.length var lettres = '', groupes = {}; pour (var i = 0, len; i
J'ai juste besoin de mapper lettres dans cette fonction que j'ai écrit à l'extérieur du rendu filteritsems = (itemlist) => {résultat = résultat.map ((élément, index) => ( )) Résultat de retour; }
Fonction ajoutée pour traiter vos marques dans la carte pour une utilisation dans la fonction de rendu.
Merci pour la réponse rapide, j'ai créé un échantillon pour mon code ici. Pouvez-vous s'il vous plaît jeter un coup d'œil et suggérer comment puis-je mettre cela parce que je suis incapable d'obtenir les données des lettres en dehors de la fonction de rendu. [link] ( Stackblitz.com/edit/react-pfzlvo )
Ne semble pas que ce sandbox rend rien, pas plus que je ne vois rien dans la console. On dirait que marques ou all_brands est des données statiques, il suffit de le calculer dans le constructeur ou dans composantDidMount . N'oubliez pas que dans le constructeur, vous pouvez définir l'état directement, mais dans composantDidMount vous devez appeler setstate . Il ne sert à rien d'avoir cela dans la fonction de rendu car il sera recalculé sur chaque appel de rendu . En fait, c'est recommandé contre.
Merci pour la suggestion, je tire les données d'API dans ComponentDidMount. S'il vous plaît vérifier cette URL une fois et vous serez clairement de ce que j'essaie de faire. Stackblitz.com/edit/react-pfzlvo Je suis capable de voir le code sur cette URL
Vous ne voyez toujours rien de sortie, avez-vous changé quoi que ce soit? Où est composentDidMount ? Cela semble être un composant incomplet.
Je suis désolé, j'ai peut-être changé quelque chose qui affectait la sortie. Mais retourné maintenant. Vous pouvez vérifier l'échantillon maintenant. ( réact-pfzlvo.stackblitz.io ) J'ai supprimé le composantDidmount dans l'échantillon parce que je ne récupère pas le données d'API dans l'échantillon.
Vous devriez certainement voir la sortie quelque chose comme indiqué dans cet instantané. ( i.imgur.com/kcs4lpw.jpg )
Object.keys(groups).map(letter, key => (
<div key={key}>
<h4>{letter}</h4>
<ul>
{
groups[letter].map((word, index) => (
<li key={index}>{word}</li>
))
}
</ul>
</div>
))
Pouvez-vous créer une démo pour reproduire un problème?
@Juscode s'il vous plaît vérifier cette URL pour l'exemple d'app Stackblitz.com/edit/react-pfzlvo