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

Question

我想使用功能组件中具有单个更改处理程序的表单中的几个值来更新状态。我无法弄清楚如何以正确的方式在状态中设置单个属性。我已经看到这在 class 组件中有效。

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 })
}

Answer 2

实际上你已经非常接近下一行中的解决方案了

  setUser({ [name]: value })

但您需要确保此输入未触及的遗留值的持久性，因此您需要将其更改为

  setUser({ ...user, [name]: value })

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

How to update a single property in a React state (function component)

javascript

state

destructuring

reactjs