JavaScript React useState 更新对象

在 React 中，可以使用 useState 钩子来管理组件的状态。当状态是一个对象时，我们需要采用特殊的方式来更新对象的属性值。

使用 useState 钩子创建状态

在使用 useState 钩子之前，首先需要导入它：

import React, { useState } from 'react';

然后，可以在函数组件中使用 useState 来创建状态：

const [state, setState] = useState(initialState);

其中，state 是当前的状态值，setState 是设置新状态值的函数，initialState 是状态的初始值。

更新状态对象

当状态是一个对象时，我们需要使用 setState 函数来更新对象的属性值。直接对对象进行赋值操作是不会触发 React 的重新渲染的。

第一种方式：使用展开运算符

可以使用展开运算符（...）来创建新的状态对象，并更新指定属性的值。下面是一个示例：

const handleClick = () => {
  setState(prevState => ({
    ...prevState,
    property: newValue,
  }));
};

在上面的示例中，我们首先通过函数参数 prevState 获取到当前状态的副本。然后，使用展开运算符将剩余的属性复制到新的状态对象中。最后，更新指定的属性值为 newValue。

第二种方式：使用函数式更新

setState 函数还可以接收一个函数作为参数来更新状态。在该函数中，可以直接访问到当前状态值，并返回一个新的状态值。下面是一个示例：

const handleClick = () => {
  setState(prevState => {
    return {
      ...prevState,
      property: newValue,
    };
  });
};

与第一种方式类似，我们也是在新的状态对象中更新指定属性的值。

完整示例

下面是一个完整的示例，展示了如何使用 useState 来更新对象的属性值：

import React, { useState } from 'react';

const App = () => {
  const [user, setUser] = useState({
    name: 'John',
    age: 30,
  });

  const handleClick = () => {
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1,
    }));
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={handleClick}>Increase Age</button>
    </div>
  );
};

export default App;

在上面的示例中，我们创建了一个名为 user 的状态对象，并使用 useState 设置其初始值。然后，我们通过点击按钮来触发 handleClick 函数，从而更新用户对象的年龄属性值。

希望以上信息可对你有所帮助！