當渲染發生在onsubmit處理程序內部時

Question

我是反應新手，在學習過程中，我嘗試了一些程式碼來理解受控和非受控元件，我使用了 usestate 和 useref。第一次我給出的資料名稱為：john 和age:40 並點擊提交，我看到名字為“prakash”，年齡為40，因為我在提交期間更改了狀態，然後我只將年齡更改為60 並點擊提交，它不會更改年齡，我很想知道，因為我在提交期間更改了狀態，這意味著它需要渲染並將年齡更改為60。您能解釋為什麼它不更改年齡嗎？

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
  
);