useState hook setter écrase incorrectement l'état

Question

Voici le problème : J'essaie d'appeler 2 fonctions sur un clic de bouton. Les deux fonctions mettent à jour l'état (j'utilise le hook useState). La première fonction met à jour la valeur 1 correctement à 'new 1', mais après 1s (setTimeout), la seconde fonction se déclenche, et elle change la valeur 2 à 'new 2' MAIS ! La valeur 1 est rétablie à '1'. Pourquoi est-ce que c'est arrivé ? Merci d'avance !

import React, { useState } from "react";

const Test = () => {
  const [state, setState] = useState({
    value1: "1",
    value2: "2"
  });

  const changeValue1 = () => {
    setState({ ...state, value1: "new 1" });
  };
  const changeValue2 = () => {
    setState({ ...state, value2: "new 2" });
  };

  return (
    <>
      <button
        onClick={() => {
          changeValue1();
          setTimeout(changeValue2, 1000);
        }}
      >
        CHANGE BOTH
      </button>
      <h1>{state.value1}</h1>
      <h1>{state.value2}</h1>
    </>
  );
};

export default Test;

Answer 1

Vos fonctions doivent être comme ceci :

const changeValue1 = () => {
    setState((prevState) => ({ ...prevState, value1: "new 1" }));
};
const changeValue2 = () => {
    setState((prevState) => ({ ...prevState, value2: "new 2" }));
};

Ainsi, vous vous assurez que vous ne manquez aucune propriété existante dans l'état actuel en utilisant l'état précédent lorsque l'action est déclenchée. Vous évitez ainsi d'avoir à gérer les fermetures.