React useState修改对象

从0开始学react系列

在 React 中，useState 是一个 Hook，它可以让函数组件拥有状态。当想要改变一个对象类型的状态时，我们需要使用展开运算符（...）或者 Object.assign 来确保状态是正确地更新。

以下是一个使用 useState 来更新对象的例子：

// App.jsx
import React, { useState } from 'react'

function App() {
  const [user, setUser] = useState({ name: '孙悟空', age: 5000 })
 
  function updateUser(newUserData) {
    setUser({ ...user, ...newUserData })
  }
 
  return (
    <div>
      <h1>Name: {user.name}</h1>
      <h1>Age: {user.age}</h1>
      <button onClick={() => updateUser({ name: '菩提老祖' })}>
      	修改名字为菩提老祖
      </button>
    </div>
  )
}
 
export default App

在这个例子中，updateUser 函数接受一个对象 newUserData ，该对象包含了要更新的属性。通过使用展开运算符 ... 来复制当前的 user 状态，并将 newUserData 中的属性加入到新的对象中，然后用 setUser 更新状态。这样可以确保组件状态的正确更新，避免了引用类型的问题。

封面图