1
votes

Lecture de l'état du composant juste après la configuration lors de l'utilisation du hook useState dans react

Ce console.log ne fonctionne pas: il affichera simplement la valeur de l'état précédent car set est async .

const SomeCompo = () => {
  const [count, set] = useState(0);
  console.log(count);
  const setFun = () => {
    set(count + 1);
  }
  return <button onClick={setFun}>count: {count}</button>
}

J'ai dû lire le décompte dans le rendu lui-même:

const SomeCompo = () => {
  const [count, set] = useState(0);
  const setFun = () => {
    console.log(count);
    set(count + 1);
    console.log(count);    
  }
  return <button onClick={setFun}>count: {count}</button>
}

Y a-t-il une meilleure façon de lire la valeur car je ne veux pas console pour chaque rendu.

reactjs react-hooks

0 commentaires

3 Réponses :

7
votes

Vous pouvez utiliser useEffect pour cela, XXX

0 commentaires

0
votes

La manière d'obtenir une valeur d'état est d'utiliser useEffect et d'utiliser l'état comme une dépendance. Cela signifie que lorsque nous modifions une valeur, le cycle de rendu se terminera et un nouveau commencera, alors useEffect déclenchera:

setValue( latest_value => {
    const new_value = latest_value + 1;

    console.log(new_value);

    return new_value;
} );

Si vous avez besoin de lire le valeur dans le même cycle lors de sa modification, une possibilité pourrait être d'utiliser la fonction useState set . Cela montre la dernière valeur juste avant de la mettre à jour:

useEffect( () => { console.log(value); }, [value] );

2 commentaires

setValue (value => {console.log (value); return value + 1;}); ceci affichera également la valeur précédente uniquement.

@ ravibagul91 vous avez raison, l'idée est que nous pouvons utiliser le dernier point où l'ancienne valeur existe.

2
votes

Je suggère de ne pas utiliser setInterval . Je ferais quelque chose comme useEffect. Cette fonction sera appelée à chaque fois que vous effectuez un setState. Tout comme vous aviez un rappel après setState. Passez l'état count dans le tableau, il ne surveillera que le count changement d'état et consolidera votre count .

useEffect(() => {
 console.log(count);
}, [count]);

1 commentaires

Je n'ai jamais pensé à utiliser useEffect comme ça. Je n'ai pas beaucoup utilisé de crochets pour le moment. Pouvez-vous expliquer pourquoi ne pas utiliser setInterval? Un problème lié aux performances?