React受控/非受控组件疑问：提交后age未更新原因咨询

问题根源 #

你遇到的age显示不更新，核心是两个React特性共同作用的结果：

1. useRef不触发渲染：useRef的.current属性变化不会触发组件重新渲染。页面上的age标签直接读取age.current.value，这个值只有在组件重新渲染时才会刷新到页面上。
2. React的state更新优化：第二次提交时，你调用setname("prakash")，但此时name的状态已经是prakash了。React会判断状态没有变化，直接跳过组件的重新渲染流程，导致age标签没机会读取最新的输入值（60），页面仍停留在之前的40。

验证方法 #

你可以试着把第二次提交的setname("prakash")改成setname("prakash_updated")，此时state发生变化，组件会重新渲染，age标签就会显示最新的60，刚好验证上述逻辑。

解决办法 #

有两种常用处理方式：

• 把age改成受控组件（推荐）：用useState管理age的状态，输入框变化时直接更新state，UI会自动和数据同步，无需依赖useRef：

  import { useState } from "react"
  
  export default function Sample() {
      const [name, setName] = useState();
      const [age, setAge] = useState();
      const handleSubmit = (e) => {
          e.preventDefault();
          setName("prakash");
          console.log(`${name},${age}`);
      }
      return (
          <form onSubmit={handleSubmit}>
              <label>name:{name}</label>
              <input type="text" onChange={(e) => setName(e.target.value)} />
              <label>age:{age}</label>
              <input type="text" onChange={(e) => setAge(e.target.value)} />
              <button>submit</button>
          </form>
      )
  }
  

• 强制触发渲染（非受控场景下）：如果一定要用useRef管理age，可以加一个专门触发更新的state，比如const [_, forceUpdate] = useState(0)，提交时调用forceUpdate(prev => prev + 1)，这样即使name没变化，组件也会重新渲染，读取最新的age.current.value。

额外提示 #

React推荐用受控组件处理表单，这样数据和UI能始终保持一致，减少状态不同步的问题。非受控组件更适合只需要获取最终输入值、不需要实时同步UI的场景。

内容的提问来源于stack exchange，提问作者prakash pappu