Bonjour, je suis assez nouveau sur react et je développe un projet avec le framework et node js. Voici mon problème j'utilise fetch pour récupérer les infos via l'API crée avec express js, donc je traite les donnés pour pouvoir retourner un component avec un prop mais cela ne s'affiche pas.
Je précise j'ai bien tester l'API retourne bien des informations...
useEffect ne renvoi aucun élément à affiché il ne se met pas directement dans le rendu il se situe généralement au dessue du return de la fonction component, dans ton cas il pourrait être écrit de cet façon:
import React from 'react';
import ObjectOfStuff from './ObjectOfStuff';
import ObjectsMenu from './ObjectsMenu';
export default function Objects() {
// déclare un effet de bord (indépendant du rendu)
React.useEffect(() => {
// envoi la requête réseaux pour récupéré les données depuis l'API
fetch("/api")
.then((response) => response.json())
.then((data) => {
// ici les données on été récupéré
// il faudra mettre à jour la vue du composant avec les nouvelles données
// ...
//...
})
.catch(error => {
console.error(error);
});
}, [])
return (
<div className="flex flex-col justify-center w-11/12 p-6 -mt-8 mx-auto bg-white shadow-md rounded-lg relative">{/*space-x-6 space-y-6*/}
<button className="shadow w-min px-6 py-2 rounded-md bg-gradient-to-r from-pink-500 to-red-500 text-white absolute top-6 right-6 transition-all duration-500 ease-in-out hover:bg-gradient-to-r hover:from-red-500 hover:to-pink-500">Create</button>
<p className="font-bold text-sm text-gray-600 text-left pl-6">OVERVIEW</p>
<p className="font-extrabold text-2xl text-left mb-2 pl-6">ALL OBJECTS</p>
<ObjectsMenu/>
<div className="flex flex-wrap justify-center gap-4 ">
{/* devrait affiché les données ici */}
</div>
</div>
)
}
Là ou en parallèle au rendu tu exécute une requête réseaux pour récupéré des données depuis ton API,
pour que le code ci-dessus fonctionne (qu'il affiche les données dans la vue) il manque une dernière chose au composant, c'est un état local,
Pour illustré avec un exemple tu aurait une variable définit avec le hook useState qui stockera les données reçut depuis l'API
import React from 'react';
import ObjectOfStuff from './ObjectOfStuff';
import ObjectsMenu from './ObjectsMenu';
export default function Objects() {
// état local contenant les données récupéré depuis l'API (null par défaut)
const [dataRender, setDataRender] = React.useState(null);
// ...
// ...
}
Le paramètre envoyé à useState et la valeur par défaut qui ici et null car on ne possède pas les données avant que l'API les et envoyé,
lorsque qu'on mettras à jour l'état local en appelant la fonction setDataRender cela provoqueras un rechargement du rendu ce qui permettras de consommé les données dans la vue.
C'est au useEffect de mettre à jour l'état local puisque c'est lui qui récupère les données depuis l'API, il pourrait simplement faire quelque chose comme:
// déclare un effet de bord (indépendant du rendu)
React.useEffect(() => {
// envoi la requête réseaux pour récupéré les données depuis l'API
fetch("/api")
.then((response) => response.json())
.then((data) =>{
// met à jour l'état local avec les données de l'API (ce qui provoque un rechargement du rendu)
setDataRender(data);
})
.catch(error => {
console.error(error);
});
}, []);
Ici le hooks useEffect envoi la requête réseaux et met à jour l'état local lorsque qu'il reçoit les données (où il affiche une erreur en cas d'erreur).
Il restera plus qu'à calculé la valeur à affiché, le calcul n'est pas très compliqué soit l'état local et null dans ce cas on à pas encore reçu les données depuis l'API il faudra affiché quelque chose pour indiqué un chargement soit les données sont reçu et on peut les affichées:
let apiRenderer = null;
if(dataRender === null) {
// la requête n'a pas encore aboutit data render vaut null
apiRenderer = <p>loading ...</p>;
} else {
// la requête à aboutit affiche les données
apiRenderer = dataRender.map(data => (
<ObjectOfStuff name={data.name}/>
));
}
Un code illustratif complet pourrait être le suivant:
import React from 'react';
import ObjectOfStuff from './ObjectOfStuff';
import ObjectsMenu from './ObjectsMenu';
export default function Objects() {
// état local contenant les données récupéré depuis l'API (null par défaut)
const [dataRender, setDataRender] = React.useState(null);
// déclare un effet de bord (indépendant du rendu)
React.useEffect(() => {
// envoi la requête réseaux pour récupéré les données depuis l'API
fetch("/api")
.then((response) => response.json())
.then((data) =>{
// met à jour l'état local avec les données de l'API (ce qui provoque un rechargement du rendu)
setDataRender(data);
})
.catch(error => {
console.error(error);
});
}, []);
let apiRenderer = null;
if(dataRender === null) {
// la requête n'a pas encore aboutit data render vaut null
apiRenderer = <p>loading ...</p>;
} else {
// la requête à aboutit affiche les données
apiRenderer = dataRender.map(data => (
<ObjectOfStuff name={data.name}/>
));
}
return (
<div className="flex flex-col justify-center w-11/12 p-6 -mt-8 mx-auto bg-white shadow-md rounded-lg relative">{/*space-x-6 space-y-6*/}
<button className="shadow w-min px-6 py-2 rounded-md bg-gradient-to-r from-pink-500 to-red-500 text-white absolute top-6 right-6 transition-all duration-500 ease-in-out hover:bg-gradient-to-r hover:from-red-500 hover:to-pink-500">Create</button>
<p className="font-bold text-sm text-gray-600 text-left pl-6">OVERVIEW</p>
<p className="font-extrabold text-2xl text-left mb-2 pl-6">ALL OBJECTS</p>
<ObjectsMenu/>
<div className="flex flex-wrap justify-center gap-4 ">
{apiRenderer}
</div>
</div>
)
}
- Edité par SamuelGaborieau3 29 novembre 2021 à 10:57:06
useEffect ne renvoi aucun élément à affiché il ne se met pas directement dans le rendu il se situe généralement au dessue du return de la fonction component, dans ton cas il pourrait être écrit de cet façon:
import React from 'react';
import ObjectOfStuff from './ObjectOfStuff';
import ObjectsMenu from './ObjectsMenu';
export default function Objects() {
// déclare un effet de bord (indépendant du rendu)
React.useEffect(() => {
// envoi la requête réseaux pour récupéré les données depuis l'API
fetch("/api")
.then((response) => response.json())
.then((data) => {
// ici les données on été récupéré
// il faudra mettre à jour la vue du composant avec les nouvelles données
// ...
//...
})
.catch(error => {
console.error(error);
});
}, [])
return (
<div className="flex flex-col justify-center w-11/12 p-6 -mt-8 mx-auto bg-white shadow-md rounded-lg relative">{/*space-x-6 space-y-6*/}
<button className="shadow w-min px-6 py-2 rounded-md bg-gradient-to-r from-pink-500 to-red-500 text-white absolute top-6 right-6 transition-all duration-500 ease-in-out hover:bg-gradient-to-r hover:from-red-500 hover:to-pink-500">Create</button>
<p className="font-bold text-sm text-gray-600 text-left pl-6">OVERVIEW</p>
<p className="font-extrabold text-2xl text-left mb-2 pl-6">ALL OBJECTS</p>
<ObjectsMenu/>
<div className="flex flex-wrap justify-center gap-4 ">
{/* devrait affiché les données ici */}
</div>
</div>
)
}
Là ou en parallèle au rendu tu exécute une requête réseaux pour récupéré des données depuis ton API,
pour que le code ci-dessus fonctionne (qu'il affiche les données dans la vue) il manque une dernière chose au composant, c'est un état local,
Pour illustré avec un exemple tu aurait une variable définit avec le hook useState qui stockera les données reçut depuis l'API
import React from 'react';
import ObjectOfStuff from './ObjectOfStuff';
import ObjectsMenu from './ObjectsMenu';
export default function Objects() {
// état local contenant les données récupéré depuis l'API (null par défaut)
const [dataRender, setDataRender] = React.useState(null);
// ...
// ...
}
Le paramètre envoyé à useState et la valeur par défaut qui ici et null car on ne possède pas les données avant que l'API les et envoyé,
lorsque qu'on mettras à jour l'état local en appelant la fonction setDataRender cela provoqueras un rechargement du rendu ce qui permettras de consommé les données dans la vue.
C'est au useEffect de mettre à jour l'état local puisque c'est lui qui récupère les données depuis l'API, il pourrait simplement faire quelque chose comme:
// déclare un effet de bord (indépendant du rendu)
React.useEffect(() => {
// envoi la requête réseaux pour récupéré les données depuis l'API
fetch("/api")
.then((response) => response.json())
.then((data) =>{
// met à jour l'état local avec les données de l'API (ce qui provoque un rechargement du rendu)
setDataRender(data);
})
.catch(error => {
console.error(error);
});
}, []);
Ici le hooks useEffect envoi la requête réseaux et met à jour l'état local lorsque qu'il reçoit les données (où il affiche une erreur en cas d'erreur).
Il restera plus qu'à calculé la valeur à affiché, le calcul n'est pas très compliqué soit l'état local et null dans ce cas on à pas encore reçu les données depuis l'API il faudra affiché quelque chose pour indiqué un chargement soit les données sont reçu et on peut les affichées:
let apiRenderer = null;
if(dataRender === null) {
// la requête n'a pas encore aboutit data render vaut null
apiRenderer = <p>loading ...</p>;
} else {
// la requête à aboutit affiche les données
apiRenderer = dataRender.map(data => (
<ObjectOfStuff name={data.name}/>
));
}
Un code illustratif complet pourrait être le suivant:
import React from 'react';
import ObjectOfStuff from './ObjectOfStuff';
import ObjectsMenu from './ObjectsMenu';
export default function Objects() {
// état local contenant les données récupéré depuis l'API (null par défaut)
const [dataRender, setDataRender] = React.useState(null);
// déclare un effet de bord (indépendant du rendu)
React.useEffect(() => {
// envoi la requête réseaux pour récupéré les données depuis l'API
fetch("/api")
.then((response) => response.json())
.then((data) =>{
// met à jour l'état local avec les données de l'API (ce qui provoque un rechargement du rendu)
setDataRender(data);
})
.catch(error => {
console.error(error);
});
}, []);
let apiRenderer = null;
if(dataRender === null) {
// la requête n'a pas encore aboutit data render vaut null
apiRenderer = <p>loading ...</p>;
} else {
// la requête à aboutit affiche les données
apiRenderer = dataRender.map(data => (
<ObjectOfStuff name={data.name}/>
));
}
return (
<div className="flex flex-col justify-center w-11/12 p-6 -mt-8 mx-auto bg-white shadow-md rounded-lg relative">{/*space-x-6 space-y-6*/}
<button className="shadow w-min px-6 py-2 rounded-md bg-gradient-to-r from-pink-500 to-red-500 text-white absolute top-6 right-6 transition-all duration-500 ease-in-out hover:bg-gradient-to-r hover:from-red-500 hover:to-pink-500">Create</button>
<p className="font-bold text-sm text-gray-600 text-left pl-6">OVERVIEW</p>
<p className="font-extrabold text-2xl text-left mb-2 pl-6">ALL OBJECTS</p>
<ObjectsMenu/>
<div className="flex flex-wrap justify-center gap-4 ">
{apiRenderer}
</div>
</div>
)
}
- Edité par SamuelGaborieau3 hier à 10:57
Oh merci beaucoup j'ai passé un certain temps sur internet pour chercher mais je n'ai rien trouvé.
Par hasard savez vous si il y a des problèmes d'actualisation de class avec tailwind car j'ai l’impression que ça fait un peu n'importe quoi. C'est la premiere fois que je l'utilise avec react alors...
Bonjour je n'ai jamais utilisé tailwind CSS et Reactjs dans le même projet mais normalement tailwind CSS fournit juste un lot de class CSS, les bugs ne sont pas censé pouvoir venir du fait que tu l'utilise avec Reactjs.
C'est à quel moment dans l'application que le CSS ce met à buggé est-ce que c'est suite à un événement du client ?
Il faudrait que tu essaies de détaillé un peut plus ton problème pour qu'on puisse t'aidé ?
Eventuellement une capture d'écran du "bug" d'affichage peut aidé à comprendre d'où vient le problème.
- Edité par SamuelGaborieau3 1 décembre 2021 à 18:39:35
suggestion de présentation.
Boucle return ne s'affiche pas React Js
× 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.