Comment obtenir l'état React mis à jour après avoir été défini ?

Question

J'ai un formulaire contenant uniquement des éléments textuels. Pourquoi, lorsque j'utilise cette fonction de gestionnaire de changement et que je définis l'état en utilisant l'écouteur d'événements de changement, cela enregistre ce qu'était l'état avant le changement?

const handleChange = event => {
        const { name, value } = event.target

        setSomeState(prevDateInputs => ({
            ...prevStateInputs,
            [name]: value,
        }))

        console.log(someState)    //  cela enregistre la valeur de l'état avant le changement

    }

Answer 1

Dans la récente version de react rfcs, vous pouvez utiliser 'use' de la même manière que la méthode async await en javascript. Plus de détails peuvent être trouvés dans ce lien https://github.com/reactjs/rfcs/pull/229

Answer 2

Est-il essentiel d'utiliser setState? Est-ce que useRef pourrait fonctionner?

import {useRef} from 'react';

const App = () => {
  const inputRef = useRef(null);

  function handleChange() {
    const {name, value} = inputRef.current;
    console.log({[name] : value});
  }

  return (

  );
};

export default App;

Mais en supposant que votre cas d'utilisation réel ne nécessite pas de console.log, il se peut que cela n'ait pas d'importance si setState n'est pas mis à jour instantanément. Dans l'exemple ci-dessous, nous voyons que la nouvelle valeur est affichée à l'écran presque instantanément dans la balise h2 même si la console.log montre l'ancienne valeur:

import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');
  const [someState, setSomeState] = useState('');

  const handleChange = event => {

    const { name, value } = event.target
    setMessage(value)
    setSomeState({[name]:value})
    console.log('value is:', someState);
  };

  return (

      {JSON.stringify(someState)}

  );
};

export default App;

Quelques détails supplémentaires ici.