在 React 中从状态数组中删除一个元素

作者

在 React 中从状态数组中删除一个元素

Remove an Element from state Array in React

在 React 中从状态数组中删除一个元素：

  1. 使用该filter()方法遍历数组。
  2. 在每次迭代中，检查是否满足条件。
  3. 将状态设置为filter方法返回的新数组。
应用程序.js
import {useState} from 'react';

export default function App() {
  // 👇️ primitives array
  const [names, setNames] = useState(['Alice', 'Bob']);

  const removePrimitiveFromArray = () => {
    // ✅ remove 'Bob' from array
    setNames(current =>
      current.filter(element => {
        return element !== 'Bob';
      }),
    );
  };

  const initialState = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
  ];

  // 👇️ array of objects
  const [employees, setEmployees] = useState(initialState);

  const removeObjectFromArray = () => {
    // ✅ Remove object with id 2 from array
    setEmployees(current =>
      current.filter(obj => {
        return obj.id !== 2;
      }),
    );
  };

  return (
    <div>
      <button onClick={removePrimitiveFromArray}>
        Remove string from state array
      </button>

      {names.map((element, index) => {
        return <h2 key={index}>{element}</h2>;
      })}

      <hr />
      <br />

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

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

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

该代码片段显示了如何从状态数组中删除基元（字符串）和对象。

我们通过两次调用useState挂钩来初始化一个姓名数组和一个员工数组
。

我们传递给
Array.filter
方法的函数将针对数组中的每个元素进行调用。

应用程序.js
const names = ['Alice', 'Bob'];

const result = names.filter(element => {
  return element !== 'Bob';
});

// 👇️ ['Alice']
console.log(result);

// ---------------------------------------------

const employees = [
  {id: 1, name: 'Alice', country: 'Austria'},
  {id: 2, name: 'Bob', country: 'Belgium'},
];

const result2 = employees.filter(obj => {
  return obj.id !== 2;
});

// 👇️ [{id: 1, name: 'Alice', country: 'Austria'}]
console.log(result2);

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

如果从未满足条件，则该Array.filter函数返回一个空数组。

第一个示例为不等于 string 的所有元素返回真值，第二个示例为属性不等于Bob的所有对象返回真值。id2

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

应用程序.js
setNames(current =>
  current.filter(element => {
    return element !== 'Bob';
  }),
);

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

当使用前一个状态计算下一个状态时，将一个函数传递给
setState.

否则，如果我们有权访问的状态数组不代表最新值，我们可能会遇到一些奇怪的竞争条件。

如果您需要根据多个条件从状态数组中删除一个元素，请使用
逻辑与 (&&)
或
逻辑或 (||)
运算符。

应用程序.js
const initialState = [
  {id: 1, name: 'Alice', country: 'Austria'},
  {id: 2, name: 'Bob', country: 'Belgium'},
  {id: 3, name: 'Carl', country: 'Austria'},
];

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

const remove = () => {
  setEmployees(current =>
    current.filter(employee => {
      return employee.id !== 3 && employee.id !== 2;
    }),
  );
};

我们使用了逻辑与 (&&) 运算符，如果两个条件都满足，它只会返回一个真值。

true仅当id对象的属性不等于3且不等于时，回调函数才返回2。

这是一个使用逻辑或 (||) 运算符的示例。

应用程序.js
const initialState = [
  {id: 1, name: 'Alice', country: 'Austria'},
  {id: 2, name: 'Bob', country: 'Belgium'},
  {id: 3, name: 'Carl', country: 'Austria'},
];

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

const remove = () => {
  setEmployees(current =>
    current.filter(employee => {
      return employee.name === 'Alice' || employee.name === 'Carl';
    }),
  );
};

两个条件中的任何一个都必须评估为要添加到新数组的元素的真值。

换句话说，如果name对象上的属性等于Alice或等于Carl，则该对象将被添加到新数组中。所有其他对象都从数组中过滤掉。

–

发表评论