在 React 中更新对象状态数组

作者

在 React 中更新对象状态数组

Update an array of objects state in React

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

  1. 使用该map()方法遍历数组。
  2. 在每次迭代中，检查是否满足特定条件。
  3. 更新符合条件的对象的属性。
应用程序.js
import {useState} from 'react';

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

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

  // ✅ Add an object to a state array
  const addObjectToArray = obj => {
    setEmployees(current => [...current, obj]);
  };

  // ✅ Update one or more objects in a state array
  const updateObjectInArray = () => {
    setEmployees(current =>
      current.map(obj => {
        if (obj.id === 2) {
          return {...obj, name: 'Sophia', country: 'Sweden'};
        }

        return obj;
      }),
    );
  };

  // ✅ Remove one or more objects from state array
  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. 从状态数组中移除一个或多个对象。

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

应用程序.js
const addObjectToArray = obj => {
  setEmployees(current => [...current, obj]);
};

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

我们将一个函数传递给，setState因为它保证在当前（最新）状态下被调用。

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

应用程序.js
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 的状态数组中删除一个对象。

应用程序.js
const removeObjectFromArray = () => {
  setEmployees(current =>
    current.filter(obj => {
      return obj.id !== 2;
    }),
  );
};

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

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

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

–

发表评论