迹忆客 专注技术分享

在 React 中更新对象状态数组：

1. 使用 map() 方法遍历数组。
2. 在每次迭代中，检查是否满足某个条件。
3. 更新符合条件的对象的属性。

import {useState} from 'react';

export default function App() {
  const initialState = [
    {id: 1, name: 'Jiyik', country: 'China'},
    {id: 2, name: 'Bob', country: 'Belgium'},
  ];

  const [employees, setEmployees] = useState(initialState);

  // ✅ 将对象添加到状态数组
  const addObjectToArray = obj => {
    setEmployees(current => [...current, obj]);
  };

  // ✅ 更新状态数组中的一个或多个对象
  const updateObjectInArray = () => {
    setEmployees(current =>
      current.map(obj => {
        if (obj.id === 2) {
          return {...obj, name: 'Sophia', country: 'Sweden'};
        }

        return obj;
      }),
    );
  };

  // ✅ 从状态数组中移除一个或多个对象
  const removeObjectFromArray = () => {
    setEmployees(current =>
      current.filter(obj => {
        return obj.id !== 2;
      }),
    );
  };

  return (
    <div>
      <button
        onClick={() =>
          addObjectToArray({
            id: Math.random(),
            name: 'Carl',
            country: 'Canada',
          })
        }
      >
        Add employee
      </button>

      <button onClick={updateObjectInArray}>Update object in array</button>

      <button onClick={removeObjectFromArray}>Remove object from array</button>

      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

这些示例展示了如何：

1. 将对象添加到状态数组。
2. 更新状态数组中的一个或多个对象。
3. 从状态数组中移除一个或多个对象。

要将对象添加到状态数组，我们必须使用扩展语法 ... 来解包数组的元素并在末尾添加对象。

const addObjectToArray = obj => {
  setEmployees(current => [...current, obj]);
};

addObjectToArray({
  id: 3,
  name: 'Carl',
  country: 'Canada',
})

我们向 setState 传递了一个函数，因为它保证以当前（最新）状态调用。

要更新状态数组中的对象，请调用 map() 方法来迭代数组并更新与条件匹配的对象。

const updateObjectInArray = () => {
  setEmployees(current =>
    current.map(obj => {
      if (obj.id === 2) {
        return {...obj, name: 'Sophia', country: 'Sweden'};
      }

      return obj;
    }),
  );
};

我们传递给 Array.map 方法的函数被数组中的每个元素调用。

在每次迭代中，我们检查对象的 id 是否等于 2，如果是，我们更新其 name 和 country 属性。

否则，我们按原样返回对象。

我们可以使用 Array.filter 方法从 React 中的状态数组中删除一个对象。

const removeObjectFromArray = () => {
  setEmployees(current =>
    current.filter(obj => {
      return obj.id !== 2;
    }),
  );
};

我们传递给 filter 方法的函数被数组中的每个元素调用。

在每次迭代中，我们检查对象的 id 是否不等于 2 并返回结果。

filter 方法返回一个新数组，该数组仅包含回调函数返回的真值。