脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 状态数组删除元素

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

 更新时间：2023年03月24日 09:48:53   作者：迹忆客  
这篇文章主要介绍了在 React 中从状态数组中删除一个元素,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

  • 使用 filter() 方法迭代数组。
  • 在每次迭代中，检查是否满足条件。
  • 将状态设置为过滤器方法返回的新数组。
import {useState} from 'react';

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

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

  const removeSecond = () => {
    setEmployees(current =>
      current.filter(employee => {
        // 👇️ 删除等于 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: {country}</h2>

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

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

我们使用 useState 挂钩初始化了一个员工状态变量。

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

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

const initialState = [
  {id: 1, name: 'Fql', country: 'Austria'},
  {id: 2, name: 'Jiyik', country: 'China'},
];

const filtered = initialState.filter(obj => {
  // 👇️ 为所有 id 不等于 2 的元素返回真
  return obj.id !== 2;
});

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

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

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

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

const removeSecond = () => {
  // 👇️ current 是当前状态数组
  setEmployees(current =>
    current.filter(employee => {
      return employee.id !== 2;
    }),
  );
};

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

永远不要在 React 中改变状态数组

你不应该使用像 Array.pop() 或 Array.splice() 这样的函数来改变 React 中的状态数组。

const removeSecond = () => {
  const index = employees.findIndex(emp => emp.id === 2)

  // ⛔️ 不要这样做
  employees.splice(index, 1)

  // ⛔️ 或者这样也不好
  employees.pop()
};

状态对象和数组是不可变的。 为了让 React 跟踪变化，我们需要将状态设置为一个新数组，而不是修改原始数组。

根据多个条件从状态数组中删除元素

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

使用逻辑与 (&&) 运算符

逻辑与 && 运算符检查多个条件是否为真。

const initialState = [
  {id: 1, name: 'Fql', country: 'Austria'},
  {id: 2, name: 'Jiyik', country: 'China'},
  {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;
    }),
  );
};

逻辑与 && 运算符仅在两个条件都为真时才计算为真。

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

使用逻辑或 (||) 运算符

逻辑 OR || 运算符检查是否至少有一个条件的计算结果为真。

const initialState = [
  {id: 1, name: 'Fql', country: 'Austria'},
  {id: 2, name: 'Jiyik', country: 'China'},
  {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;
    }),
  );
};

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

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

使用两个运算符从状态数组中删除元素

如果我们必须检查多个复杂条件，也可以同时使用这两种运算符。

const initialState = [
  {id: 1, name: 'Fql', country: 'Austria'},
  {id: 2, name: 'Jiyik', country: 'China'},
  {id: 3, name: 'Carl', country: 'Austria'},
];

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

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

使用两个运算符从状态数组中删除元素

括号中的代码使用逻辑 OR || 运算符来检查 employee 对象的 name 属性是否是两个值之一。

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

如果满足条件，则逻辑与 && 运算符检查对象的国家/地区属性是否等于加拿大。

括号中的表达式必须计算为真，右侧的条件必须计算为真才能将对象保存在状态数组中。

从 React 中的 State 数组中删除重复项

要从状态数组中删除重复项：

  • 使用 useState() 挂钩将数组存储在状态中。
  • 使用 Set() 构造函数从状态数组中删除重复项。
  • 将状态数组更新为新值。
import {useState} from 'react';

const App = () => {
  const words = ['fql', 'fql', 'jiyik', 'jiyik', 'com'];
  const [state, setState] = useState(words);

  const withoutDuplicates = [...new Set(words)];

  // 👇️ ['fql', 'jiyik', 'com']
  console.log(withoutDuplicates);

  const removeDuplicates = () => {
    setState(prevState => [...new Set(prevState)]);
  };

  return (
    <div>
      <button onClick={removeDuplicates}>
        Remove duplicates
      </button>

      {state.map((word, index) => {
        return (
          <div key={index}>
            <h2>{word}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

从 React 中的 State 数组中删除重复项

我们传递给 Set 构造函数的参数是一个可迭代的——在我们的例子中是一个数组。

const words = ['fql', 'fql', 'jiyik', 'jiyik', 'com'];

// 👇️ {'fql', 'jiyik', 'com'}
console.log(new Set(words));

const withoutDuplicates = [...words];
console.log(withoutDuplicates); // 👉️ ['fql', 'jiyik', 'com']

!> 数组的所有元素都添加到新创建的集合中。 但是，Set 对象只能存储唯一值，因此会自动删除所有重复项。

最后一步是使用 Spread 运算符 ... 将 Set 的值解包到一个新数组中。

从 React 中的状态数组中删除重复对象

要从 React 中的状态数组中删除重复对象：

  • 创建一个将存储唯一对象 ID 的空数组。
  • 使用 filter() 方法迭代状态数组。
  • 检查唯一 ID 数组是否包含当前对象的 ID。
  • 如果包含 ID，则将对象的 ID 添加到唯一 ID 数组并将对象添加到状态数组。
import {useState} from 'react';

const App = () => {
  const employees = [
    {id: 1, name: 'Fql'},
    {id: 1, name: 'Fql'},
    {id: 2, name: 'Jiyik'},
    {id: 2, name: 'Jiyik'},
  ];

  const [state, setState] = useState(employees);

  const handleClick = () => {
    const uniqueIds = [];

    setState(currentState => {
      return currentState.filter(element => {
        const isDuplicate = uniqueIds.includes(element.id);

        if (!isDuplicate) {
          uniqueIds.push(element.id);

          return true;
        }

        return false;
      });
    });
  };

  return (
    <div>
      <button onClick={handleClick}>
        Remove duplicate objects
      </button>

      {state.map((employee, index) => {
        return (
          <div key={index}>
            <h2>id: {employee.id}</h2>
            <h2>name: {employee.name}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

从 React 中的状态数组中删除重复对象

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

const employees = [
  {id: 1, name: 'Fql'},
  {id: 1, name: 'Fql'},
  {id: 2, name: 'Jiyik'},
  {id: 2, name: 'Jiyik'},
];

const uniqueIds = [];

const uniqueEmployees = employees.filter(element => {
  const isDuplicate = uniqueIds.includes(element.id);

  if (!isDuplicate) {
    uniqueIds.push(element.id);

    return true;
  }

  return false;
});

console.log(uniqueEmployees);

在每次迭代中，我们检查唯一 ID 数组是否包含当前对象的 ID。

如果是这样，我们有一个副本。

如果不包含它，我们需要将 ID 添加到唯一 ID 数组并从函数返回一个真值。

如果传递给该方法的函数返回真值，则过滤器方法只会向结果数组添加一个元素。

uniqueEmployees 数组不包含任何重复项。

我们使用 id 属性作为对象的标识符。 但是，在您的情况下，对象的标识符可能被称为其他名称。

本质上，我们的解决方案是：

  • 仅将唯一 ID 添加到 uniqueIds 数组。
  • 如果对象的 ID 不在 uniqueIds 数组中，则仅将对象添加到结果数组。

到此这篇关于在 React 中从状态数组中删除一个元素的文章就介绍到这了,更多相关React 状态数组删除一个元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 在React项目中添加吸顶效果的代码示例

    在React项目中添加吸顶效果的代码示例

    在大型Web应用中，一个常见的设计需求是让某些组件具有吸顶效果，这意味着当页面向下滚动时，该组件会保持在屏幕顶部，在本文中，我们将介绍如何在React项目中实现吸顶效果。我们将首先讨论使用原生JavaScript领域的方法来实现，然后将这些方法与React结合起来
    2023-06-06
  • React源码state计算流程和优先级实例解析

    React源码state计算流程和优先级实例解析

    这篇文章主要为大家介绍了React源码state计算流程和优先级实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

    react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

    这篇文章主要介绍了react项目升级报错,babel报错,.babelrc配置兼容等问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • React Hooks之useRef获取元素示例详解

    React Hooks之useRef获取元素示例详解

    这篇文章主要介绍了React Hooks之useRef获取元素示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • 快速创建React项目并配置webpack

    快速创建React项目并配置webpack

    这篇文章主要介绍了创建React项目并配置webpack,在这里需要注意，Create React App requires Node 14 or higher.需要安装高版本的node，本文给大家介绍的非常详细，需要的朋友参考下吧
    2022-01-01
  • React Native 中添加自定义字体的方法

    React Native 中添加自定义字体的方法

    这篇文章主要介绍了如何在 React Native 中添加自定义字体,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • React如何解决fetch跨域请求时session失效问题

    React如何解决fetch跨域请求时session失效问题

    这篇文章主要给大家介绍了关于React如何解决fetch跨域请求时session失效问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 使用React+ts实现无缝滚动的走马灯详细过程

    使用React+ts实现无缝滚动的走马灯详细过程

    这篇文章主要给大家介绍了关于使用React+ts实现无缝滚动的走马灯详细过程,文中给出了详细的代码示例以及图文教程,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-08-08
  • ahooks解决用户多次提交方法示例

    ahooks解决用户多次提交方法示例

    这篇文章主要为大家介绍了ahooks解决用户多次提交的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • create-react-app中添加less支持的实现

    create-react-app中添加less支持的实现

    这篇文章主要介绍了react.js create-react-app中添加less支持的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论