Lorsque le rendu se produit dans le gestionnaire onsubmit

Question

Je suis nouveau dans la réaction et tout en apprenant, j'ai essayé du code pour comprendre les composants contrôlés et non contrôlés, j'ai utilisé usestate et useref. La première fois que j'ai donné le nom des données comme : john et l'âge : 40 et j'ai cliqué sur soumettre, j'ai vu le nom comme "prakash" et l'âge comme 40 parce que j'ai changé de statut lors de la soumission, puis j'ai changé seulement l'âge à 60 et j'ai cliqué sur soumettre, cela ne change pas l'âge, ce que je me demande parce que j'ai changé l'état lors de la soumission, ce qui signifie qu'il doit restituer et changer l'âge à 60. Pouvez-vous expliquer pourquoi cela ne change pas l'âge ?

import { Fragment, useReducer, useRef, useState } from "react"



export default function Sample()
{
    
    const [name,setname]=useState();
    const age=useRef();
    const handelsubmit=(e)=>{
        e.preventDefault();
        setname("prakash")
        console.log(`${name},${age.current.value}`)
    }
    return(
    <form onSubmit={handelsubmit}>
        <label>name:{name}</label>
        <input type="text" onChange={(e)=>setname(e.target.value)} />
        <label>age:{age.current?.value==undefined?null:age.current.value}</label>
        <input type="text" ref={age}/>
        <button>submit</button>
    </form>
    )
}

Answer 1

La raison pour laquelle la modification de la valeur d'entrée age ne met pas à jour la valeur d'âge affichée est que vous utilisez le hook useRef pour accéder à la valeur du champ de saisie age, qui ne déclenche pas de nouveau rendu lorsque sa valeur change.

Dans votre code, vous mettrez à jour le statut du nom mais pas le statut de l'âge lors de la soumission du formulaire. Lorsque vous accédez à la valeur d'âge à l'aide de age.current.value, vous accédez directement à la valeur actuelle du champ de saisie d'âge sans utiliser l'état du composant. Étant donné que la valeur de age.current.value ne fait pas partie de l’état du composant, sa modification ne déclenchera pas de rendu.

Après avoir défini le statut de nom, vous pouvez mettre à jour le statut d'âge dans la fonction handelsubmit :

const [name, setName] = useState("");
const [age, setAge] = useState("");
const ageRef = useRef();

const handleSubmit = (e) => {
  e.preventDefault();
  setName("prakash");
  setAge(ageRef.current.value);
};

return (
  

    name: {name}
     setName(e.target.value)} />
    age: {age}
    
    submit
  
);