React输入框状态无法修改，提交始终发送初始值问题求助

核心问题 #

你当前使用defaultValue绑定输入框初始值，这会让输入框成为非受控组件——defaultValue仅在组件首次挂载时生效，后续name state更新不会同步到输入框的显示逻辑中，最终导致提交时拿到的不是最新修改值。

修复步骤 #

1. 改用受控组件绑定
   将Form.Control的defaultValue替换为value，让输入框值始终与name state双向绑定，确保修改实时同步：

   <Form.Control
     type='text' // 注意：HTML无type='name'，标准类型为text
     placeholder='Enter name'
     value={name} // 替换defaultValue为value
     onChange={(e) => setName(e.target.value)}
   />
   

2. 修正useEffect的细节问题

   • 给useEffect添加正确的依赖数组，避免React钩子警告；
   • 将userInfo声明为局部变量，避免全局变量污染：

   useEffect(() => {
     const userInfo = localStorage.getItem('userInfo')
     if (!userInfo) {
       navigate('/login')
     } else {
       setName(JSON.parse(userInfo).name)
     }
   }, [navigate]) // 添加navigate到依赖数组
   

3. 确认提交逻辑正确性
   确保提交函数直接使用当前的name state值发送请求，示例：

   const submitHandler = (e) => {
     e.preventDefault()
     // 使用最新的name值发起请求
     fetch('/api/update-profile', {
       method: 'PUT',
       body: JSON.stringify({ name }),
       headers: { 'Content-Type': 'application/json' }
     })
   }
   

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