React useState未按预期更新导致表单提交后数据无法正常展示问题

问题根因 #

• React的setState是异步批量更新的，调用setNewPatient后，当前作用域下的patient变量还是更新前的旧值（初始为空对象），所以执行Users.push(patient)时插入的是空对象，导致数据异常
• 直接修改普通数组Users不会触发React组件重渲染，侧边栏菜单无法感知数据变化，自然不会更新展示
• 原有逻辑用nome.length作为唯一id存在重复风险，重名用户会出现id冲突

修复步骤 #

1. 移除多余的patient状态，直接用表单当前值构造新患者对象，避开异步更新的坑
2. 将用户列表Users改为React状态管理，只有状态更新才会触发组件重渲染，侧边栏才能同步刷新
3. 可选优化：给表单字段加必填属性、提交后清空表单，提升使用体验

修复后核心逻辑代码 #

import { useState } from 'react'
// Material UI相关导入省略

export function Home() {
  const [nome, setNome] = useState("")
  const [hospital, setHospital] = useState("")
  const [describe, setDescribe] = useState("")
  // 用useState管理用户列表，更新后自动触发重渲染
  const [userList, setUserList] = useState([])

  function handleCreateNewPatient(event){
    event.preventDefault()
    // 直接构造新患者对象，无需走异步state更新
    const newPatient = {
      id: Date.now(), // 用时间戳作为唯一id，避免重复
      nome: nome,
      hospital: hospital,
      describe: describe
    }
    // 不可变更新用户列表
    setUserList(prevList => [...prevList, newPatient])
    // 提交后清空表单
    setNome("")
    setHospital("")
    setDescribe("")
  }

修复后表单代码 #

<form onSubmit={handleCreateNewPatient} >
  <div>
    <TextField
      label="姓名"
      required
      value={nome}
      onChange={event=>setNome(event.target.value)}
    />
    <TextField
      label="医院"
      required
      value={hospital}
      onChange={event=>setHospital(event.target.value)}
    />
  </div>
  <div>
    <TextareaAutosize
      aria-label="描述信息"
      minRows={3}
      required
      value={describe} 
      onChange={event=>setDescribe(event.target.value)}
    />
  </div>
  <Button type="submit" variant="contained">Confirmar</Button>
</form>

后续侧边栏直接渲染userList中的nome、hospital字段即可，列表更新时侧边栏会自动同步刷新。

内容的提问来源于stack exchange，提问作者Pedro H Correia