J'utilise des crochets de réaction et j'ai besoin de stocker les données de mon serveur qui est un objet, à un état.
C'est comme ça que je l'ai défini à l'intérieur de l'USEEffect: strong> p> <div key={sendingTime.length} className={classes.stats}>
<UpdateIcon fontSize={"small"} /> Last updated at{" "}
{Object.keys(sendingTime).length > 0 &&
sendingTime.Complaints[0].updatedAt}
</div>
3 Réponses :
Lorsque vous appelez: p> setsfinturetime code> provient d'un USESTE code> de sorte qu'il est asynchrone: setSendingTime({sendingTime : res.data})
console.log('sendingTime is coimng',sendingTime)
setsXDeTime code> fonctionne de manière asynchrone et votre objet n'a peut-être pas encore été enregistré dans l'état. Faites également attention à la façon dont vous enregistrez l'heure dans votre état, vous enveloppez le résultat des données dans un autre objet avec la propriété SendingTime code>, qui aboutira à l'objet suivant: SendingTime = { SendingTime: {/ * Données ici * /}} code>. Si vous exécutez pour SendingTime: {/ * Données ici * /} CODE> Essayez ce qui suit: const getTime = () => {
axios
.get('https://localhost:1999/api/getLastUpdatedTime')
.then((res) => {
console.log(res.data);
setSendingTime(res.data);
console.log('sendingTime is coimng', sendingTime);
})
.catch((err) => console.error(err));
};
Ok je l'ai changé en envoyant à partir de Time (rés.data) et j'ai également ajouté l'envoi du temps d'envoi à l'USEEFFET DEPS comme suit: useEffect ((((() => {getcount () gettime ()}, [EnvoyerTime]). C'est la console.Log L'objet maintenant, mais il continue de renverser. Il ne s'arrête jamais.
Quel type de données est renvoyé de l'appel Axios? S'il s'agit d'un objet et que cet objet est défini par une propriété unique (par exemple ID), utilisez cette propriété dans la matrice du deuxième argument.
En outre, combien de fois voulez-vous appeler userfeffect ()? Si vous souhaitez l'appeler une seule fois après le composant initialement rendu, utilisez un tableau vide. Actuellement, lorsque vous passez l'objet, vous faites une boucle infinie. Je vais expliquer - vous appelez Gettime et modifiez les données du temps. Après cela, vous dites réagis que vos données ont changé (cela est fait lorsque vous passez le paramètre Time dans le tableau) et appelle useEffect à nouveau. Étant donné que vos données sont un objet, réagir est la comparaison de sa référence (après que chaque appel AxIOS est différent).
Ceci est renvoyé de res.data = {plaintes: tableau (1), résolu: tableau (1), attribué: tableau (1), rejeté: tableau (1), non résolue: tableau (1), ...}. Je veux l'appeler une fois et j'ai eu un tableau vide dans l'UseEffect, mais que mon État n'était pas supporté du tout. C'était vide
Voici comment je souhaite accéder à ses propriétés et afficher les données tout au long du composant: Dernière mise à jour à {EnvoyerTime.comPlaints [0] .updatedat}. Mais l'envoi de l'envoi n'est pas initialisé du tout, aussi, cela me donne cette erreur = TypeError: impossible de lire la propriété '0' de non définie.
Même si je n'utilise pas de crochets de réaction et que je stocke simplement l'objet dans une variable, je ne suis toujours pas capable d'accéder à ses propriétés.
Ok oui, je vois les données maintenant, mais je vais enregistrer des "données" en ce moment. Si je suis en train de connecter l'envoi, il affiche toujours un objet vide. Comme il est vide, je ne peux toujours pas accéder à ses propriétés tout au long du composant.
Parce que c'est async et ne sera pas défini avant le prochain re-rendu (comme je l'ai mentionné). Ceci est un bien connu d'état de réglage avec un crochet de réaction
Comment puis-je le réparer alors? J'ai également essayé de stocker les données d'un objet variable, cela fonctionnera peut-être de cette façon, je pouvais voir la variable dans la console.log, mais là encore, il restait encore le problème de l'accès à ses propriétés. Il m'a donné cette erreur = TypeError: impossible de lire la propriété '0' de non définie
Vous devez fournir plus de contexte / exemples, car ce que vous avez ne me montre pas ce que vous essayez de faire. Vous devez accéder à la valeur d'envoi dans votre composant et correspond à la valeur que vous définissez à partir de setsfinTime sur le suivant rendu (pas le courant une)
Ok donc j'ai un useeffect là-bas, j'appelle une fonction Gettime. Dans cette fonction, je récupère les données qui sont un objet = {plaintes: tableau (1), résolue: tableau (1), attribué: tableau (1), rejeté: tableau (1), non résolue: tableau (1), ...} . Et j'ai défini l'heure d'envoi avec le rés.data de cette manière setSancerTime (rés.data). Je souhaite utiliser cet état pour afficher les données dans la fonction de retour du composant de cette façon = Dernière mise à jour à {envoitime.comPlaints [0] .updatedat}. Mais cela me donne cette erreur = TypeError: impossible de lire la propriété '0' de non définie
Vérifiez le code ci-dessus et voyez si cela fonctionne, j'ai mis à jour la réponse
Mais le problème est que je veux plus d'un temps mis à jour. Celui-ci est juste pour les plaintes. Je souhaite que le temps mis à jour de l'attribution, rejeté, etc. et tous ces éléments sont stockés dans l'objet (rés.data) que je reçois du serveur.
Vous pouvez jeter un coup d'œil à mon code précédent, j'ai dû faire autant d'États, puis les définir avec les données et utiliser chacun d'eux séparément pour afficher les données. Pour réduire ou améliorer le codage, je voulais stocker les données de l'objet État, puis accéder directement aux propriétés avec cet état. D'où un nombre moins de États.
Pourquoi ne stockez-vous pas simplement la réponse complète des données et y accédez-y dans votre composant? Vous devrez peut-être avoir des vérifications pour vous assurer que les valeurs sont définies en premier.
@Aldor essayez mon code mis à jour et laissez-moi savoir s'il est plus proche de ce dont vous avez besoin
Merci @dana Woodman. J'ai mis à jour la question en ajoutant les chèques. Ça marche parfaitement bien maintenant.
@Aldor content que tu pensais. Si vous pensez que ma réponse résolue, veuillez l'accepter / lui donner un uppote. Merci :)
Vous ne voulez pas que la longueur est une clé pour l'article. De plus, vous n'avez pas besoin d'envelopper
fontsize = "petit" entre crochets.Que puis-je donner comme clé?
Eh bien, il est difficile de dire compte tenu de la partielle coupée, mais vous voudrez probablement une clé unique pour l'article comme un identifiant de base de données ou un nom unique.