Problème d'affichage des data du Backend

Salut à tous :wave:

J’aurais besoin de votre aide, je suis actuellement sur un projet d’application mobile (livraison de repas) avec React native expo.

Ou je récupère mes infos de mon backend sanity et les affichent via une requête dans mon Frontend

Infos que je récupère bien, mais je n’arrive pas à les afficher correctement, j’obtiens cette erreur

Visiblement qui vient de mon fichier FeaturedRow.js

Pourtant j’arrive bien à afficher les infos sur mes Catégories.

Ça fait plus de 24h que je bloque dessus, donc je vous remercie d’avance pour votre aide ou idées👍

Salut,

Comme c’est le cas dans tous les frameworks JS tu dois pouvoir différencier les éléments de la liste dans le DOM. Pour cela chaque élément doit comporter un identifiant unique. Sous VueJS c’est :key par exemple, ici en React c’est key={number.toString()} que tu rajoutes à l’élément parent de enfant de la liste.

Tu trouveras la documentation ici : https://reactjs.org/docs/lists-and-keys.html

Si tu ne le fais pas, ton code fonctionnera mais tu auras des problèmes lors de l’update du DOM.

Salut Alexis,

merci pour ton retour :+1:
J’avais bien consulté cette partie de la documentation React Native et malgré plusieurs tests pour y intégrer key sans succès.

J’ai constaté aussi que quand je supprime le mapping et toutes les props de mon composant <RestaurantCard/> je n’a plus d’erreur concernant key, il me reste bien un composant <RestaurantCard/> affiché, pourtant je ne vois pas mes infos non plus.

Malgré ça toutes les infos sont bien présentent dans la console quand je les log :dizzy_face:

Salut Alexis :wave:,

Après avoir résolu mon problème avec key

Je n’arrivais toujours à pas à afficher mes infos,
donc après avoir revu entièrement mon backend et tester chacune de mes requêtes. :angry:

J’ai finalement trouvé d’ou venait le problème :face_with_peeking_eye:

Une erreur qui était sous mon nez depuis le début, mais bon.

Tel est la voie du Développeur

Donc c’est bon, sujet clôturé.
Merci