useState 嵌套对象 - JavaScript

在 JavaScript 中，useState 是 React 中的一个 Hook，用于在函数组件中添加状态管理。它可以用于管理简单的值类型，如字符串或数字，也可以用于管理复杂的嵌套对象。

基本用法

你可以使用 useState 来创建一个状态变量，并通过数组解构将其拆分成当前状态值和更新状态值的函数。

import React, { useState } from 'react';

function App() {
  const [user, setUser] = useState({
    name: 'John',
    age: 25,
    email: 'john@example.com'
  });

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default App;

在上面的示例中，我们使用 useState 创建了一个名为 user 的状态变量，并将其初始值设为一个对象。我们可以使用解构将 user 拆分成 name、age 和 email，然后将它们作为文本渲染在组件中。

更新嵌套对象

要更新嵌套对象，我们需要使用 spread 运算符进行浅复制，以确保不直接修改原始状态的引用。

import React, { useState } from 'react';

function App() {
  const [user, setUser] = useState({
    name: 'John',
    age: 25,
    email: 'john@example.com'
  });

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

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
      <p>Email: {user.email}</p>
      <button onClick={handleAgeChange}>Increase Age</button>
    </div>
  );
}

export default App;

在上述示例中，我们使用一个按钮的点击事件来增加用户的年龄。我们通过传递一个函数给 setUser 来更新状态，并在其中使用对象的解构和 spread 运算符来复制原始对象并增加年龄。

总结

通过使用 useState 和对象解构，我们可以在 React 的函数组件中轻松管理嵌套对象的状态。我们可以根据需要更新嵌套对象的特定属性，而不会直接修改原始对象，从而确保 React 组件的可预测性和性能。