Je suis confus sur la façon dont une fonction async fonctionne.
la console.log renvoie une erreur car les données.rate n'existent pas encore. Mais je pensais parce que la fonction USEEFFEFCECT est une asynchronisation de quoi elle serait appelée après que l'ASYNC soit terminée. P>
function App() {
const [data, setData] = useState();
useEffect(() => {
(async () => {
const result = await axios.get(
"https://open.exchangerate-api.com/v6/latest"
);
setData(result.data);
})();
}, []);
console.log(data.rates); <-- Error data.rates does not exist
return <div>{!data ? "Loading..." : "Hello"}</div>;
}
3 Réponses :
Essayez de faire cela (j'ai un peu créé une solution de contournement)
Je ressens que rien des réponses ne répondent réellement à la question.
useEffect n'arrête pas le flux d'exécution, peu importe ce que vous faites à l'intérieur du rappel transmis. Donc, la console.log (data.rates) est exécutée, puis une fois que le composant est monté, le rappel transmis sur useeffect est exécuté. Étant donné que l'état est modifié dans le rappel ( setingdata (résultat.data) ), cela déclenche un re-rendu et cette fois, vous devez voir que la valeur correcte est enregistrée sans erreur.
Votre hypothèse est réellement correcte, UseEffect dans ce scénario s'exécutera lorsque le composant est monté em> qui signifie console.log code> sera appelé deux fois - d'abord avec la valeur initiale ( Ce qui est indéfini), la seconde est après l'utilisation de l'effet secondaire lorsque des données sont réellement définies (Sedata) après la réalisation de la demande. Vous fourniriez généralement un état "chargement" tandis que les données sont obsolètes. function App() {
const [loading, setLoading] = useState(false);
const [data, setData] = useState();
useEffect(() => {
(async () => {
setLoading(true);
const result = await axios.get(
"https://open.exchangerate-api.com/v6/latest"
);
setLoading(false);
setData(result.data);
})();
}, []);
if (loading) return <div>Fetching data...</div>
return <div>Hello</div>;
}
Initialement, votre état
Data est indéfini afin que vous obteniez l'erreur lors de la journalisation.Une fois que l'état est mis à jour, vous devez voir la valeur correcte enregistrée.