react hook 修改对象数据的几种方式

修改对象的方式

在 React 中使用 useState 钩子来修改对象数据时，通常推荐使用函数式更新方式，以确保状态的不可变性，并让 React 能够正确地检测到状态变化并触发组件的重新渲染。以下是一些修改对象数据的例子：

例子 1：修改对象的一个属性

import React, { useState } from 'react';

const App = () => {
  const [user, setUser] = useState({ name: '张三', age: 25 });

  const updateName = () => {
    setUser(prevUser => ({
      ...prevUser,
      name: '李四'
    }));
  };

  return (
    <div>
      <p>姓名: {user.name}</p>
      <p>年龄: {user.age}</p>
      <button onClick={updateName}>修改姓名</button>
    </div>
  );
};

export default App;

在这个例子中，我们使用扩展运算符 (...) 来创建一个新的对象，并只修改 name 属性。

例子 2：修改嵌套对象的一个属性

import React, { useState } from 'react';

const App = () => {
  const [address, setAddress] = useState({
    city: '北京',
    details: {
      street: '长安街',
      number: 123
    }
  });

  const updateStreet = () => {
    setAddress(prevAddress => ({
      ...prevAddress,
      details: {
        ...prevAddress.details,
        street: '王府井大街'
      }
    }));
  };

  return (
    <div>
      <p>城市: {address.city}</p>
      <p>街道: {address.details.street}</p>
      <p>门牌号: {address.details.number}</p>
      <button onClick={updateStreet}>修改街道</button>
    </div>
  );
};

export default App;

在这个例子中，我们同样使用扩展运算符 (...) 来创建一个新的嵌套对象，并只修改 details 对象中的 street 属性。

例子 3：添加或删除对象的属性

添加属性

import React, { useState } from 'react';

const App = () => {
  const [profile, setProfile] = useState({ name: '张三', age: 25 });

  const addEmail = () => {
    setProfile(prevProfile => ({
      ...prevProfile,
      email: 'zhangsan@example.com'
    }));
  };

  return (
    <div>
      <p>姓名: {profile.name}</p>
      <p>年龄: {profile.age}</p>
      {profile.email && <p>邮箱: {profile.email}</p>}
      <button onClick={addEmail}>添加邮箱</button>
    </div>
  );
};

export default App;

在这个例子中，我们通过扩展运算符 (...) 添加了一个新的 email 属性。

删除属性

import React, { useState } from 'react';

const App = () => {
  const [profile, setProfile] = useState({ name: '张三', age: 25, email: 'zhangsan@example.com' });

  const removeEmail = () => {
    const { email, ...rest } = profile;
    setProfile(rest);
  };

  return (
    <div>
      <p>姓名: {profile.name}</p>
      <p>年龄: {profile.age}</p>
      {profile.email && <p>邮箱: {profile.email}</p>}
      <button onClick={removeEmail}>删除邮箱</button>
    </div>
  );
};

export default App;

在这个例子中，我们使用解构赋值来删除 email 属性，并保留其他属性。

通过这些例子，你可以看到如何使用 useState 钩子来修改对象数据，同时保持状态的不可变性，以确保 React 能够正确地检测到状态变化并触发组件的重新渲染。

修改对象数组的方式

在 React 中，如果你有一个数组，其中每个元素都是一个对象，并且你想修改数组中某个对象的属性，你需要创建一个新的数组并更新相应的对象。这可以通过 map 函数来实现，map 函数可以遍历数组并返回一个新数组。

以下是一个示例，展示了如何修改数组中某个对象的属性：

import React, { useState } from 'react';

const App = () => {
  // 初始化包含对象的数组
  const [users, setUsers] = useState([
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
    { id: 3, name: '王五', age: 35 }
  ]);

  // 修改数组中某个对象的属性
  const updateUserAge = (userId, newAge) => {
    setUsers(prevUsers =>
      prevUsers.map(user =>
        user.id === userId ? { ...user, age: newAge } : user
      )
    );
  };

  return (
    <div>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            {user.name} - {user.age} 岁
            <button onClick={() => updateUserAge(user.id, user.age + 1)}>
              年龄+1
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

在这个示例中，我们首先使用 useState 初始化了一个包含对象的数组。然后，我们定义了一个 updateUserAge 函数，该函数使用 map 函数来创建一个新的数组，并只更新具有特定 id 的对象的 age 属性。

具体步骤如下：

1. 使用 useState 初始化包含对象的数组。
2. 定义一个函数 updateUserAge，该函数接受 userId 和 newAge 作为参数，并使用 map 函数来创建一个新的数组。
3. 在 map 函数中，检查每个对象的 id 是否与 userId 匹配。如果匹配，则创建一个新的对象并更新 age 属性；否则，返回原始对象。
4. 在组件的 JSX 中，显示用户列表并提供一个按钮来触发年龄更新。

这样，当你点击按钮时，视图会正确地更新显示新的用户年龄。通过这种方式，你可以确保 React 能够检测到状态的变化并正确地更新视图。