当渲染发生在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

);