Wenn das Rendern im Onsubmit-Handler erfolgt

Question

Ich bin neu im Reagieren und während des Lernens habe ich Code ausprobiert, um kontrollierte und unkontrollierte Komponenten zu verstehen. Ich habe usestate und useref verwendet. Als ich zum ersten Mal den Datennamen als „John“ und „Alter: 40“ eingegeben und auf „Senden“ geklickt habe, sah ich den Namen „prakash“ und das Alter „40“, weil ich beim Senden den Status geändert habe. Dann habe ich nur das Alter auf „60“ geändert und auf „Senden“ geklickt. Das ändert sich nicht das Alter, worüber ich mich frage, weil ich den Status während der Übermittlung geändert habe, was bedeutet, dass das Alter gerendert und auf 60 geändert werden muss. Können Sie erklären, warum sich dadurch das Alter nicht ändert?

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

更改年龄输入值没有更新显示的年龄值的原因是您使用 useRef 挂钩来访问年龄输入字段的值，这 当其值发生变化时不触发重新渲染。

在您的代码中，您将在提交表单时更新姓名状态，但不会更新年龄状态。当您使用age.current.value 访问年龄值时，您将直接访问年龄输入字段的当前值，而不使用组件的状态。由于age.current.value的值不是组件状态的一部分，因此更改它不会触发重新渲染。

设置name的状态后，您可以在handelsubmit函数中更新age的状态：

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

);