J'ai fait face à un problème de réagir JS, je souhaite rendre toutes les données de l'API de repos et montrez avec un indice numérique.
API de repos: P>
<p key={index}>{this.state.appointmentdata[index][0].cust_full_name}</p>
<p key={index}>{this.state.appointmentdata[index][1].cust_full_name}</p>
3 Réponses :
Vous pouvez utiliser le rendu conditionnel et votre condition finale est un ternaire pour cartographier la matrice de données à JSX ou renvoyer NULL. Le tableau :: Carte Premier argument est l'élément actuel en cours d'itérale et le deuxième argument est l'index actuel. Lorsque vous retournez JSX comme si vous devez retourner un seul nœud. Ici, j'ai utilisé un fragment Rendu conditionnel
Listes et clés P> réact code> et attaché la clé là-bas. J'ai également détruit les propriétés de l'élément que vous vouliez afficher. {
(this.state.appointmentdata &&
this.state.appointmentdata.length &&
this.state.appointmentdata[1].start_date.toString() > this.state.newprevious)
? this.state.appointmentdata.map(({ cust_full_name, full_name }, index) => (
<Fragment key={index}>
<p>{cust_full_name}</p>
<p>{full_name}</p>
</Fragment>
) : null
}
Merci, vous pouvez vérifier mon exemple de code @Drew
@adnankhan Désolé, le code de votre bac à sable ne compilera pas. Vous avez mélangé la syntaxe de composants fonctionnelle et basée sur la classe et défini certaines fonctions de cycle de vie en dehors du composant. Mais la majeure partie de vos calculs est mûre pour la cartographie et la fabrication de votre code plus Dry (Don 't répétez-vous).
J'ai mis à jour Sandbox code d'exemple [@Drew] ( Stackoverflow.com/users/8690857/trew- Reese }
@adnankhan Codesandbox.io/s / ...
@Adnan Khan Bienvenue à Stackoverflow! Pour rendre un tableau d'éléments, vous pouvez utiliser la fonction Array.Map https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_Objects/array/map
Dans votre exemple, cela pourrait ressembler à ceci p >
if(this.state.appointmentdata && this.state.appointmentdata.length){
this.state.appointmentdata.map((data ,index) => <p key={index}>{data.cust_full_name}</p> )
}
Avez-vous vérifier mon code? @sonali
@adnankhan Pouvez-vous partager quelle est votre histoire d'utilisateur? Le code dans Sandbox peut être amélioré à bien des égards, mais nous devons comprendre votre histoire d'utilisation.
Si vous souhaitez rendant des éléments de manière dynamique, le rendu conditionnel est une option
Vous pouvez utiliser mapper () em> sur rendez-vousData et créer le même nombre d'éléments que des objets à la suite de l'exemple de l'API Sample: P> render() {
return (
<React.Fragment>
{
this.state.appointmentdata.length
?
this.state.appointmentdata.map(ele => {
return (
<React.Fragment>
<p key={`cf_${ele.id}`}>{ele.cust_full_name}</p>
<p key={`f_${ele.id}`}>{ele.full_name}</p><hr/>
</React.Fragment>
)
})
: "__"
}
</React.Fragment>
);
}
Veuillez également regarder mon code `codesandbox 'exemple de code @saurabh
Bonjour @ Adnankhan, j'ai vérifié votre exemple, mais certaines erreurs syntaxiques ont donc créé un nouvel exemple de sable. Veuillez vous reporter: codesandbox.io/s/elated-bouman-z40ld
mais vous manquez mon état start_date> this.state.Newprevious @saurabh
start_date> this.state.newcurrent et start_date> this.state.newfirst et ainsi de suite
@adnankhan, je viens de construire un exemple d'exemple pour que vous puissiez comprendre le rendu dynamique des éléments. Si vous souhaitez ajouter une condition supplémentaire, vous pouvez toujours le faire en ajoutant des conditions supplémentaires dans la fonction Carte ou vous pouvez utiliser un filtre () qui filtrera les objets dans une matrice que vous souhaitez rendre. Selon votre logique d'entreprise, vous pouvez ajouter des conditions supplémentaires si vous avez compris le concept de base du rendu dynamique des éléments.
Pourriez-vous s'il vous plaît faire une codesandbox?
Êtes-vous capable de mapper le tableau vers JSX? Vous obtenez un index gratuitement avec Array :: Carte.
ok waitez une minute @Leon
Je partagerai un exemple de code avec vous @Drew
J'ai mis à jour
Codesandbox Démo Vous pouvez vérifier @LeonVotre codesandbox ne compile toujours pas et, à ce stade, je ne pense pas que votre problème soit cartographier un tableau simple. Veuillez mettre à jour votre question avec working code et décrivez spécifiquement votre sortie souhaitée / attendue. Nous ne sommes pas là pour réparer le code que vous fournissez juste pour le faire courir.