如何更新 React 状态中的单个属性（函数组件）

Question

我想用函数组件中的单个更改处理程序来更新表单中的几个值的状态。我不知道如何以正确的方式设置该州的单个属性。我已经在类组件中看到了它的工作原理。

import React, {useState} from 'react'
import ReactDOM from 'react-dom'

export function Example(){
  const [user, setUser] = useState({nickname: '', age: 0})

  const handleChange = event => {
    const { name, value } = event.target
    setUser({ [name]: value })
  }

  return(
     <form>
       <input name="nickname" onChange={handleChange} />
       <input name="age" onChange={handleChange} />
       <button onClick={(e) => {
         e.preventDefault()
         console.log(user)
        }}>Show User</button>
     </form>
  )
}

ReactDOM.render(
    <Example />,
    document.getElementById('app')
);

上面的代码不能按我想要的方式工作，因为它总是覆盖整个状态，而不仅仅是相应的属性。

我收到：

Object {age: "24"}
Object {nickname: "Lala"}

我想：

Object {age: "24", nickname: "Lala"}

实现这一目标的最佳实践是什么？

Answer 1

尝试这样做：

const handleChange = event => {
    const { name, value } = event.target
    setUser({ ...user, [name]: value })
}