迹忆客 专注技术分享

在 React 中从状态数组中移除一个对象：

1. 使用 filter() 方法遍历数组。
2. 在每次迭代中，检查是否满足条件。
3. 将状态设置为 filter 方法返回的新数组。

import {useState} from 'react';

export default function App() {
  const initialState = [
    {id: 1, name: '迹忆客', site: 'www.jiyik.com'},
    {id: 2, name: '百度', site: 'www.baidu.com'},
  ];

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

  const removeSecond = () => {
    setEmployees(current =>
      current.filter(employee => {
        // 👇️ remove object that has id equal to 2
        return employee.id !== 2;
      }),
    );
  };

  return (
    <div>
      <button onClick={removeSecond}>Remove second</button>

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

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

我们使用 useState 钩子初始化了一个 employee 状态变量。

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

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

const initialState = [
    {id: 1, name: '迹忆客', site: 'www.jiyik.com'},
    {id: 2, name: '百度', site: 'www.baidu.com'},
];

const filtered = initialState.filter(obj => {
  // 👇️ returns truthy for all elements that
  // don't have an id equal to 2
  return obj.id !== 2;
});

// 👇️ [{id: 1, name: '迹忆客', site: 'www.jiyik.com'}]
console.log(filtered);

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

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

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

const removeSecond = () => {
  // 👇️ current is the current state array
  setEmployees(current =>
    current.filter(employee => {
      return employee.id !== 2;
    }),
  );
};

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

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

如果我们需要根据多个条件从状态数组中删除对象，请使用逻辑 AND && 或逻辑 OR || 运算符。

const initialState = [
  {id: 1, name: '迹忆客', site: 'www.jiyik.com'},
  {id: 2, name: '百度', site: 'www.baidu.com'},
  {id: 3, name: 'Google', site: 'www.google.com'},
];

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

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

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

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

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

const initialState = [
  {id: 1, name: '迹忆客', site: 'www.jiyik.com'},
  {id: 2, name: '百度', site: 'www.baidu.com'},
  {id: 3, name: 'Google', site: 'www.google.com'},
];

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

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

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

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