React hooks: accès à l'état à jour à partir d'un rappel

Question

J'utilise React hooks et j'essaie de lire l'état à partir d'un rappel. Chaque fois que le rappel y accède, il revient à sa valeur par défaut.

Avec le code suivant. La console continuera d'imprimer Count is: 0 peu importe combien de fois je clique.

function Card(title) {
  const [count, setCount] = React.useState(0)
  const [callbackSetup, setCallbackSetup] = React.useState(false)

  function setupConsoleCallback(callback) {
    console.log("Setting up callback")
    setInterval(callback, 3000)
  }

  function clickHandler() {
    setCount(count+1);
    if (!callbackSetup) {
      setupConsoleCallback(() => {console.log(`Count is: ${count}`)})
      setCallbackSetup(true)
    }
  }


  return (<div>
      Active count {count} <br/>
      <button onClick={clickHandler}>Increment</button>
    </div>);

}

const el = document.querySelector("#root");
ReactDOM.render(<Card title='Example Component' />, el);

Vous pouvez trouver ce code ici

Je n'ai eu aucun problème à définir l'état dans un rappel, uniquement pour accéder au dernier état.

Si je devais deviner, je penserais que tout changement d'état crée une nouvelle instance de la fonction Carte. Et que le rappel fait référence à l'ancien. Sur la base de la documentation à https://reactjs.org/docs/hooks-reference.html#functional-updates , j'ai eu une idée de prendre l'approche d'appeler setState dans le rappel et de passer un fonction setState, pour voir si je pouvais accéder à l'état actuel depuis setState. Remplacement

setupConsoleCallback(() => {console.log(`Count is: ${count}`)})

avec

setupConsoleCallback(() => {setCount(prevCount => {console.log(`Count is: ${prevCount}`); return prevCount})})

Vous pouvez trouver ce code ici

Cette approche n'a pas fonctionné non plus. EDIT: En fait, cette seconde approche fonctionne . Je viens d'avoir une faute de frappe dans mon rappel. C'est la bonne approche. J'ai besoin d'appeler setState pour accéder à l'état précédent. Même si je n'ai pas l'intention de mettre l'État en place.

J'ai l'impression d'avoir adopté des approches similaires avec les classes React, mais. Pour la cohérence du code, je dois m'en tenir à React Effects).

Comment puis-je accéder aux dernières informations d'état à partir d'un rappel?

Answer 1

La seule méthode que je connaisse est d'appeler la fonction setState (current_value => ...) et d'utiliser la current_value dans votre logique. Assurez-vous simplement de le renvoyer. Ex:

const myPollingFunction = () => {
    setInterval(() => {
        setState(latest_value => {
            // do something with latest_value
            return latest_value;    
        }
    }, 1000);
};