Ainsi, IM apprencez-vous réagir et construire une application qui utilise l'API Marvel pour afficher les informations de Heroes. À l'heure actuelle, j'ai une page affichant l'image et le nom de tous les héros. J'aime savoir comment puis-je manipuler l'API afin que lorsque vous cliquez sur la photo d'un héros, cela me conduit à une page contenant plus de détails sur eux (description, liste des séries, etc.) contenues dans l'API. Je dois probablement utiliser des états pour cela, mais je ne sais pas vraiment comment aborder ce scénario. Voici le code de ce que j'ai obtenu:
3 Réponses :
Eh bien, si vous souhaitez montrer une autre page concernant les détails du héros, vous pouvez transmettre le nom de héros via la route ex: http: // marvelheros / TonySTark Vous pouvez rediriger de manière programmative. https://dev.to/projectcape/programmatique-navigation-in-reac- 3P1L
Une autre approche est que vous pouvez utiliser une pop-up pour afficher les détails du héros
Tout d'abord, vous devez créer un événement OnCliquez sur le composant cartographié Heros puis transmettez-le sur l'historique, appuyez et créez des itinéraires dans App.js, puis obtenez le chemin transmis comme match.params. ..... sur app.js p> sur un nouveau composant où vous montreriez héros détails: p> const Component2 = ({match}) => {
match.params.heroname = a unique id/name u sent withhistory.push('/heros/' + hero.name)
Une idée cool mais je doute de l'Onclick dans
Si vous cliquez sur Heroes, il vous naviguera sur la route dynamique avec History.Push. Vous devez importer l'historique de React-Router-Dom
"Id like to know how can I manipulate the api ..." I think you need to check the Marvel API Docs for that.From my experience, APIs usually comes with a certain pattern. Say for example we have an API for books in a library: Hitting /books URL means that you will get all the books in the library. The result will definitely be an array of objects. Just like what you have with the heroes. Hitting /books/43 URL means that you will get the detail of a certain book. Here, it is with book ID equals 43. The result should be an object with all the information for that certain book. This is what you are searching for. I haven't use nor read the Marvel API, but I believe it should be there in the documentation.To implement it in your React App, you can definitely use the example from Sushilzzz.