Question

用户必须在表单中输入姓名和医院，然后他们的姓名和医院将出现在侧边菜单中。但我不能让它发生，useState 返回一个空状态所以它不工作

export function Home() {
 
  const [nome, setNome] = useState("")
  const [hospital, setHospital] = useState("")
  const [describe, setDescribe] = useState("")
  const [patient, setNewPatient] = useState({})

  
  
  function handleCreateNewPatient(event){
    event.preventDefault()
    
    setNewPatient({
      id: nome.length,
      nome: nome,
      hospital: hospital,
      describe: describe
    })

    Users.push(patient)
    
  }

带有表单UI素材的代码

<form onSubmit={handleCreateNewPatient} >
             <div>
               <TextField
                 value={nome}
                 onChange={event=>setNome(event.target.value)}
               />
               <TextField
                 value={hospital}
                 onChange={event=>setHospital(event.target.value)}
               />
             </div>
             <div>
               <TextareaAutosize
               value={describe} 
               onChange={event=>setDescribe(event.target.value)}
            />
             </div>
             <Button type="submit">Confirmar</Button>
           </form>

Answer 1

问题在这里：

setNewPatient({
      id: nome.length,
      nome: nome,
      hospital: hospital,
      describe: describe
    })

    Users.push(patient)

<块引用>

setState() 是异步的。 React 不保证状态更改会立即应用。将 setState() 视为更新组件的请求而不是立即命令。

要获得更新的值，您必须使用 useEffect 如下：

useEffect(() => {
    if( patient.hasOwnProperty('id') )  // Checking if patient is set or not
    {
        Users.push(patient)
    }
}, [patient]);  // Here `patient` is the dependency so this effect will run every time when `patient` change.

这种类型的逻辑会帮助你。

Answer 2

状态更新在 React 中不是同步的。你可以这样做：

function handleCreateNewPatient(event){
    event.preventDefault();

    const patient = {
      id: nome.length,
      nome: nome,
      hospital: hospital,
      describe: describe
    };

    setNewPatient(patient)
    Users.push(patient)
  }

或者写一个在另一个答案中提到的效果。

useState 在需要时不会改变

2 个答案: