Je suis bloqué depuis plusieurs jours, j'ai une réponse (stocké dans response.data) qui ressemble à sa (je peux déjà la loger) :
{
"success": true,
"data": {
"favourite_conseils": [
{
"id": 1,
"title": "Le titre de mon conseil 1",
"speciality": [
1,
2
],
"attachments": [
"https://placekitten.com/200/200",
"https://placekitten.com/200/300"
],
"isFavourite": true,
"isPack": false,
"message": "Message conseil 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar sed augue non sodales. Sed orci ex, aliquam vel maximus ac, posuere eu ex. Sed et est felis."
},
{
"id": 2,
"title": "Le titre de mon conseil 2",
"speciality": [
1,
3
],
"isFavourite": true,
"isPack": true,
"messages": [
{
"message": "Message conseil 2.1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar sed augue non sodales. Sed orci ex, aliquam vel maximus ac, posuere eu ex. Sed et est felis.",
"duration": "48",
"attachments": [
"https://placekitten.com/200/200"
]
},
{
"message": "Message conseil 2.2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar sed augue non sodales. Sed orci ex, aliquam vel maximus ac, posuere eu ex. Sed et est felis.",
"duration": "75",
"attachments": [
"https://placekitten.com/200/200"
]
},
{
"message": "Message conseil 2.3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar sed augue non sodales. Sed orci ex, aliquam vel maximus ac, posuere eu ex. Sed et est felis.",
"duration": "9360",
"attachments": []
}
]
}
]
}
}
Cependant je n'arrive pas à afficher mes valeurs, je met response.data dans une constante tutorials avec setTutorials, puis j'essaie de faire ceci :
ça compile mais quand j'essaie d'afficher la page il me dit que tutorials.map n'est pas une fonction... Je sais que je peux pas mapper sur un objet mais j'ai bien "favourite_conseils": [...] comme tableau, mais je n'arrive pas à y accéder.
Je suis novice en react veuillez m'excuser si des choses sont incompréhensibles ou incohérentes.
Merci de votre aide !
- Edité par PouneyDisign 20 octobre 2021 à 16:40:01
Bonjour est-ce que tu peut nous posté le contenue de ton composant, si quand tu fait un tutorials.map l'erreur t'indique TypeError: tutorials.map is not a function, c'est automatiquement que tutorials ne contient pas un tableau.
Tu peut au dessus du return de la fonction faire un console.log de tutorials pour voir ce qu'il contient.
Au moment où tu récupère tes données JSON tu doit donnée à la constantes tutorials la valeur de response.data.favorite_conseils pour qu'il ne contienne que le tableau JSON, où alors au moment de mappé tu doit appliqué le map sur tutorials.data.favorite_conseils pour itéré sur le tableau.
Bonjour est-ce que tu peut nous posté le contenue de ton composant, si quand tu fait un tutorials.map l'erreur t'indique TypeError: tutorials.map is not a function, c'est automatiquement que tutorials ne contient pas un tableau.
Tu peut au dessus du return de la fonction faire un console.log de tutorials pour voir ce qu'il contient.
Au moment où tu récupère tes données JSON tu doit donnée à la constantes tutorials la valeur de response.data.favorite_conseils pour qu'il ne contienne que le tableau JSON, où alors au moment de mappé tu doit appliqué le map sur tutorials.data.favorite_conseils pour itéré sur le tableau.
Et si tu fais un console.log(response.data.favorite_conseils) avant d'appeler la fonction setTutorials ?
Il me dit undifinded dans ma console. Mais il y a quelque chose que je trouve bizarre, quand je fais un console.log de response.data il m'affiche bien mon retour d'API, mais quand je fais console.log de tutorials après avoir fait setTutorials(response.data); je n'ai pas le même retour, du moins pas a chaque fois je comprend pas...
Attends, juste avant la ligne qui appelle setTutorials, donc dans ton .then(response => {}), si tu fais console.log(response.data), tu as quoi ?
Bon, pour le peu que je comprend, le souci se situerait dans la fonction setTutorials(), ou dans le retour de tutorialDataService.getAll(). Quoi qu'il en soit, tutorials se voit bien attribuer le type array, mais le contenu n'est pas défini.
Et là j'ai beau regarder ton code, je ne comprend pas, n'ayant aucune connaissance dans le fonctionnement de react.
Attends, juste avant la ligne qui appelle setTutorials, donc dans ton .then(response => {}), si tu fais console.log(response.data), tu as quoi ?
Bon, pour le peu que je comprend, le souci se situerait dans la fonction setTutorials(), ou dans le retour de tutorialDataService.getAll(). Quoi qu'il en soit, tutorials se voit bien attribuer le type array, mais le contenu n'est pas défini.
Et là j'ai beau regarder ton code, je ne comprend pas, n'ayant aucune connaissance dans le fonctionnement de react.
C'est vrais que React c'est particulier. J'ai déjà tenté un console.log de response.data avant le setTutorials et il est bon, j'ai bien un succes avec ma data dedans... mais rien dans tutorials après le setTutorials
Bonjour est-ce que tu nous as posté la photo du log complet où uniquement la partie favourite_conseils du log parce que dans la fonction retrieveTutorials tu affecte à tutorials la valeur response.data qui selon le format de la réponse que tu nous à montré ne contient pas un tableau mais un objet.
Si typescript te dit que la propriété favourite_conseils n'existe pas ces que le type de donnée que renvoi la méthode getAll de TutorialDataService et incomplète car la propriété devrait existait, est ce que tu peut nous montré le code de la fonction getAll de l'objet TutorialDataService (surtout pour voir la valeur de retour) la valeur de retour doit être quelque chose comme cela:
const TutorialDataService = {
// là où un objet devrait définir la propriété favorite_conseil
getAll(): Promise<UnObjet> {
// ...
// ...
}
}
Et UnObjet devrait être un type qui définit le format de la grappe JSON qui et renvoyait par le service, quelque chose comme cela:
Bonjour est-ce que tu nous as posté la photo du log complet où uniquement la partie favourite_conseils du log parce que dans la fonction retrieveTutorials tu affecte à tutorials la valeur response.data qui selon le format de la réponse que tu nous à montré ne contient pas un tableau mais un objet.
Si typescript te dit que la propriété favourite_conseils n'existe pas ces que le type de donnée que renvoi la méthode getAll de TutorialDataService et incomplète car la propriété devrait existait, est ce que tu peut nous montré le code de la fonction getAll de l'objet TutorialDataService (surtout pour voir la valeur de retour) la valeur de retour doit être quelque chose comme cela:
const TutorialDataService = {
// là où un objet devrait définir la propriété favorite_conseil
getAll(): Promise<UnObjet> {
// ...
// ...
}
}
Et UnObjet devrait être un type qui définit le format de la grappe JSON qui et renvoyait par le service, quelque chose comme cela:
- Edité par SamuelGaborieau3 il y a environ 14 heures
Merci pour ta réponse très complète !
En effet, mon retour contient d’autres objects que favorite_conseils mais dans ce cas là c’est celui-ci uniquement que je veux récupérer et j’ai fini par comprendre aussi que c’est à cause de la syntaxe de ce retour que mon code ne fonctionnera pas (c’est un exple trouvé sur le net adapté au mieux à ma structure, j’ai réussi avec le login mais là pour un GET puis display c’est plus compliqué.
EDIT : Ah c'est bon ! En fait mon response.data contient toute la réponse, mais mon response.data.data contient seulement les données dont j'ai besoin, j'ai donc du écrire response.data.date.favorite_conseils
- Edité par PouneyDisign 22 octobre 2021 à 13:03:46
React afficher data API
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.
suggestion de présentation.