扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >在 React 中如何从状态数组中删除一个元素
  • 894

0
分享到

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

React 状态数组删除一个元素React 数组删除元素 2023-03-24 11:03:55 894人浏览 独家记忆
摘要

目录在 React 中从状态数组中删除一个元素：永远不要在 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 状态数组删除一个元素内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 在 React 中如何从状态数组中删除一个元素

本文链接: https://lsjlt.com/news/201138.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 在 React 中如何从状态数组中删除一个元素
    目录在 React 中从状态数组中删除一个元素：永远不要在 React 中改变状态数组根据多个条件从状态数组中删除元素使用逻辑与 (&&) 运算符使用逻辑或 (||)...
    99+
    2023-03-24
    React 状态数组删除一个元素 React 数组删除元素
  • React中怎么从状态数组中删除一个元素
    本文小编为大家详细介绍“React中怎么从状态数组中删除一个元素”，内容详细，步骤清晰，细节处理妥当，希望这篇“React中怎么从状态数组中删除一个元素”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。在 React...
    99+
    2023-07-05
  • 在 PHP 中从数组中删除一个元素
    问： 有没有一种简单的方法可以使用 PHP 从数组中删除一个元素，从而使 foreach ($array) 不再包含该元素？ 我认为将它设置为 null 会做到这一点，但显然它不起作用。 答1: ...
    99+
    2023-08-31
    php java 开发语言 phpstorm ar
  • java数组中如何删除一个元素
    在Java中，数组的长度是固定的，无法直接删除元素。但可以通过创建一个新的数组来间接删除元素。具体步骤如下：1. 创建一个新的数组，...
    99+
    2023-10-18
    java
  • Vuejs如何从数组中删除元素
    这篇文章主要介绍“Vuejs如何从数组中删除元素”，在日常操作中，相信很多人在Vuejs如何从数组中删除元素问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vuejs如何从数组中删除元素”的疑惑有所帮助！接下来...
    99+
    2023-07-05
  • 如何从 PHP 中的数组中删除元素
    在本文中，我们将介绍从 PHP 中的数组中删除元素的方法。 使用 unset() 函数 使用 array_splice() 函数 使用 array_diff() 函数 使...
    99+
    2024-02-27
  • php如何从数组中间移除一个元素
    今天小编给大家分享一下php如何从数组中间移除一个元素的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。移除方法：1、用“$in...
    99+
    2023-06-30
  • es6如何删除一个数组元素
    这篇文章主要讲解了“es6如何删除一个数组元素”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“es6如何删除一个数组元素”吧！ 方...
    99+
    2024-04-02
  • 如何在javascript中删除数组元素
    如何在javascript中删除数组元素？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。JavaScript可以做什么1.可以使网页具有交互性，例如响应用户点击，...
    99+
    2023-06-14
  • 如何在Golang中删除数组元素
    如何在Golang中删除数组元素 在Golang中，数组是一个固定大小的数据结构，无法直接删除元素，但可以通过切片来实现删除元素的效果。下面将详细介绍在Golang中如何删除数组元素的...
    99+
    2024-02-22
    删除 golang 数组 代码可读性
  • jquery数组如何删除第一个元素
    本文小编为大家详细介绍“jquery数组如何删除第一个元素”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery数组如何删除第一个元素”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新...
    99+
    2024-04-02
  • es6数组如何删除第一个元素
    这篇文章主要介绍“es6数组如何删除第一个元素”，在日常操作中，相信很多人在es6数组如何删除第一个元素问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”es6数组如何删除第一个...
    99+
    2024-04-02
  • javascript如何删除数组第一个元素
    本篇内容主要讲解“javascript如何删除数组第一个元素”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript如何删除数组第一个元素”吧! ...
    99+
    2024-04-02
  • php数组如何删除第一个元素
    这篇文章主要为大家展示了“php数组如何删除第一个元素”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“php数组如何删除第一个元素”这篇文章吧。php删除数组中第一个元素的方法：1、使用array...
    99+
    2023-06-15
  • jquery中如何删除一个元素
    今天小编给大家分享一下jquery中如何删除一个元素的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解...
    99+
    2024-04-02
  • 如何在 PHP 中删除空数组元素
    在本文中，我们将介绍一些方法来删除 PHP 中的空数组元素。 使用 array_filter() 函数 使用 array_diff() 函数 使用 unset() 函数 ...
    99+
    2024-02-27
  • 从两个数组Golang中删除相同的元素
    php小编苹果为您带来了一篇有关从两个数组中删除相同元素的文章。在编程中，经常会遇到需要删除数组中相同元素的情况，这种操作可以帮助我们更好地处理数据。本文将介绍如何使用Golang语言...
    99+
    2024-02-11
  • php 从数组中删除指定元素
    在 PHP 中，我们可以使用 array_splice() 函数从数组中删除指定的元素。除此之外，还有一些其他的方法，比如使用 unset() 函数或 array_filter() 函数来删除指定元素。下面我们将详细介绍这些方法的用法和注意...
    99+
    2023-05-24
  • PHP如何删除数组中的某个元素
    这篇文章主要介绍PHP如何删除数组中的某个元素，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！php有什么用php是一个嵌套的缩写名称，是英文超级文本预处理语言，它的语法混合了C、Java、Perl以及php自创新的语...
    99+
    2023-06-15
  • python如何删除数组中的某个元素
    在Python中，可以使用`del`关键字或者使用列表的`remove()`方法来删除数组中的某个元素。1. 使用`del`关键字：...
    99+
    2023-09-26
    python
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作