Apabila rendering berlaku di dalam pengendali onsubmit

Question

Saya baru bertindak balas dan semasa belajar, saya mencuba beberapa kod untuk memahami komponen terkawal dan tidak terkawal, saya menggunakan usestate dan useref. Kali pertama saya memberikan nama data sebagai: john dan umur:40 dan mengklik hantar saya melihat nama sebagai "prakash" dan umur sebagai 40 kerana saya menukar status semasa menghantar kemudian saya menukar hanya umur kepada 60 dan klik hantar, ia tidak berubah umur, yang saya tertanya-tanya kerana saya menukar keadaan semasa menyerahkan, yang bermaksud ia perlu membuat dan menukar umur kepada 60 tahun. Bolehkah anda jelaskan mengapa ia tidak mengubah umur?

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

Sebab menukar nilai input umur tidak mengemas kini nilai umur yang dipaparkan ialah anda menggunakan cangkuk useRef untuk mengakses nilai medan input umur, yang tidak mencetuskan pemaparan semula apabila nilainya berubah.

Dalam kod anda, anda akan mengemas kini status nama tetapi bukan status umur semasa menghantar borang. Apabila anda mengakses nilai umur menggunakan age.current.value, anda mengakses terus nilai semasa medan input umur tanpa menggunakan keadaan komponen. Memandangkan nilai age.current.value bukan sebahagian daripada keadaan komponen, mengubahnya tidak akan mencetuskan perenderan semula.

Selepas menetapkan status nama, anda boleh mengemas kini status umur dalam fungsi 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

);