Problème ordre d'exécution au sein d'une fonction

charlespzi
Javascript

Je voudrai que les actions au sein de la fonction d'excutent dans l'ordre. Parce que là j'ai l'impression que -- setXp(xp + 5) -- s'executent en dernier et vu que les étapes suivantes dépendent de son résultat tout est décalé. 

  const [xp, setXp] = useState(0);
  const [lvl, setLvl] = useState(1);
  const [per, setPer] = useState(0);

function plusXp() {
    setXp(xp + 5);
    console.log(xp); // -> donne 0
    setLvl(Math.trunc( (25 + Math.sqrt(625 + 100 * (xp) ) ) / 50));
    setPer( 100 * (xp - (25 * Math.pow(lvl, 2) - 25 * (lvl)) ) / ( (25 * Math.pow(lvl + 1, 2) - 25 * (lvl + 1)) ));
    document.getElementById("myBar").style.width = per + "%";
  };

Ce que je veux

Je voudrai que les actions au sein de la fonction d'excutent dans l'ordre.
Donc que le -- console.log(xp); -- après -- setXp(xp + 5); -- donne 5 et pas 0.

Ce que j'obtiens

Les étapes de la fonction semblent s'executer dans le désordre. Et du coup

4 réponses

elessa237

le useState si je ne me trompe pas doit etre definit au sein de la fontion

Soundboy39

Hello

Qu'est-ce que que ça donne si tu fait un "console.log(setXp(xp + 5));" ??

charlespzi
Auteur

console.log(setXp(xp + 5));

Ca affiche "undefined"

charlespzi
Auteur

elessa237
les useaState sont définis dans une fonction qui englobe la fonction plusXp

function App() {

  const [xp, setXp] = useState(0);
  const [lvl, setLvl] = useState(1);
  const [per, setPer] = useState(0);

  function plusXp() {
    setXp(xp + 5);
    console.log(xp);
    setLvl(Math.trunc( (25 + Math.sqrt(625 + 100 * (xp) ) ) / 50));
    setPer( 100 * (xp - (25 * Math.pow(lvl, 2) - 25 * (lvl)) ) / ( (25 * Math.pow(lvl + 1, 2) - 25 * (lvl + 1)) ));
    document.getElementById("myBar").style.width = per + "%";
  };