在组件状态下从数组中删除元素

2023-11-27

我正在尝试找到在组件状态下从数组中删除元素的最佳方法。因为我不应该修改this.state直接变量,是否有比我这里更好的方法(更简洁)从数组中删除元素?:

  onRemovePerson: function(index) {
    this.setState(prevState => { // pass callback in setState to avoid race condition
      let newData = prevState.data.slice() //copy array from prevState
      newData.splice(index, 1) // remove element
      return {data: newData} // update state
    })
  },

谢谢。

updated

这已更新为使用 setState 中的回调。在更新当前状态时应该执行此操作。


我见过的最干净的方法是filter:

removeItem(index) {
  this.setState({
    data: this.state.data.filter((_, i) => i !== index)
  });
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在组件状态下从数组中删除元素 的相关文章

  • Jqplot 中两个系列数据的不同颜色条

    我想知道如何在 Jqplot 中为两个系列制作不同的颜色条 如果我只有一个系列数据 它的工作原理如下图所示 红色和绿色基于其值 但是 如果我有两个系列数据 我无法为每个系列数据配置两个系列颜色 目前我只能做这个图 我希望两个系列图可以根据其
  • Object.assign() - 奇怪的行为需要解释

    我有这个代码 function margeOptions options passedOptions options Object assign options passedOptions let passedOpts a true let
  • 从 Angular 6 服务中绑定图像

    我有一个端点 它根据某些参数为我提供图像 这不是一个图像网址 而是一个普通图像 因此 当我到达邮递员中的端点时 作为响应 我收到一张图像 JPG 我是否可以在变量中接收该图像并将其绑定到 HTML 标签中 所有问题都有将图像 url 映射到
  • 将字符串转换为变量名。 (JavaScript)

    我确实查看了前面的问题 但它们是针对整数值的 我需要文本值的答案 我在本周早些时候问了一个与此相关的问题 但现在是这样 如下所示 我使 Make x 等于某个字符串值 Acura Honda Toyota 当我将 Make x 传递到函数
  • 将参数传递给 jquery 单击事件中的回调函数[重复]

    这个问题在这里已经有答案了 直接进入正题 我有一个 jquery 事件监听器 如下所示 number click printNumber 和一个回调函数 function printNumber number console log num
  • 将 FBX 文件转换为 .gltf 后,模型非常小,为什么?

    问题 将 FBX 文件转换为 gltf 后 模型非常小 为什么 我尝试用以下方法缩放模型frontObject scale set 1000 1000 1000 但我收到以下错误 TypeError Cannot read property
  • 使用 AntD 样式响应 Hook 表单

    我试图弄清楚如何将react hook form与antd前端一起使用 我已经制作了这个表单 它似乎正在工作 它是多部分表单向导的第 1 部分 只是不显示错误消息 谁能看到我在合并这两个表单系统时做错了什么 我没有收到任何错误 但我认为我已
  • 为什么新行上的 return 语句不返回任何值? [复制]

    这个问题在这里已经有答案了 考虑以下情况 function func1 return hello world function func2 return hello world console log func1 console log f
  • 拖放图像上传在服务器上不起作用

    我正在尝试实现拖放图像上传 我在网上找到了一个相当简单的脚本并适合我的使用 在我的本地安装中 文件上传得很好 但在服务器上却不行 从我的调试尝试来看 SERVER HTTP X FILENAME 甚至没有被 php 设置 我尝试了以下方法
  • jQuery 问题:它的真正含义是什么?

    function window undefined jquery code jQuery window 它到底意味着什么 是不是也意味着 document ready 或者只是两种不同的东西 已经有两个答案 但这是我对代码缺失端的猜测 fu
  • Google Maps JS Api - b.get 不是函数错误(isLocationOnEdge)

    我想检查我的路线上是否有标记 所以我尝试使用 isLocationOnEdge 但收到 TypeError b get 不是函数 错误 这是我的代码 我尝试了几次更改但无法解决问题 var directionsDisplay new goo
  • 为什么在 vue 组件上输入另一个输入时,输入文件的值丢失了?

    我有两个组件 我的第一个组件 父组件 如下所示
  • 从 UnityWebGL jslib 返回字符串

    我想使用 jslib 来获取网址参数 像这样的代码 jslib GetUrl function var s var strUrl window location search var getSearch strUrl split var g
  • 发送404状态并重定向到react-router中的404组件

    我有一个 React router 3 0 0 设置 其中包含一个 NotFound 组件 我将其显示为后备
  • ReactJS 模式无法使用 Materialise css 打开

    我是 ReactJS 的新手 正在学习使用 Materialise css 创建模型 https materializecss com https materializecss com import React Component from
  • Flot 0.8.2 折线图 - 颜色错误

    我正在使用 Flot 折线图并设置它们的颜色 我发现了一个奇怪的错误 在前 3 种颜色之后 绘图对所有其他线条使用最后一种颜色 这不是正确的行为 更有趣的是图例显示了正确的颜色 这是一个已知的错误 var dataSet label d1
  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中
  • Webpack:如何使用动态捆绑组合两个完全独立的捆绑包

    我花了很多时间研究这个问题 但毫无结果 我知道代码分割和动态捆绑在 Webpack 中如何使用import承诺API 然而 我的用例是我有两个完全独立的包 使用不同的 webpack 版本分别生成 为了给您提供视角 我正在构建 React
  • Javascript 替换为正则表达式无法正常工作

    我正在尝试使用正则表达式验证名称 正则表达式阻止用户连续输入 2 个空格或点 这是我的代码 function test input var regex A Za z 0 1 s 0 1 input value input value rep
  • 在64位环境中加载32位进程

    我有以下几个问题 CHM 是 编译的 HTML 文件 我的 CHM 文件有一个启动 32 位应用程序的链接 CHM 文件是用 Javascript 编码的 这在 32 位操作系统环境中运行良好 但这在 64 位操作系统环境中不起作用 原因是

随机推荐

  • 如何修改非常大的 zip 中的单个文件而不重写整个 zip?

    我有包含巨大文件的大型 zip 文件 zip 存档中有一些需要修改的 元数据 文本文件 但是 无法提取整个 zip 并重新压缩它 我需要在 zip 中找到目标文本文件 对其进行编辑 并可能将更改附加到 zip 文件中 文本文件的文件名始终相
  • 从 Option>> 解开并访问 T

    我正在尝试用 Rust 解决一些 Leetcode 问题 然而 我在使用 LeetCode 时遇到了一些困难TreeNode执行 use std cell RefCell use std rc Rc TreeNode data struct
  • Android:WebView的方法goBack()显示空白页面

    我有一个 Android 应用程序 它使用 WebView 在活动中加载网页 我正在使用手动检索页面并使用 WebView 的使用BaseURL加载数据将其显示在屏幕上 那里的一切都很好 现在 我尝试覆盖 后退 按钮按下以模拟在 WebVi
  • 如何将 iOS React Native 模板转换为 Swift?

    我一直在阅读有关 React Native 的内容 并决定尝试一下 我在 Swift 方面很有经验 但从未尝试过 Objective C 所以我想将模板项目转换为使用 AppDelegate swift 我按照这个接受的答案中的解决方案进行
  • Fetch API 与 XMLHttpRequest

    我知道 Fetch API 使用Promises 并且它们都允许您向服务器发出 AJAX 请求 我读到 Fetch API 有一些额外的功能 这些功能在XMLHttpRequest 以及在 Fetch API polyfill 中 因为它基
  • 什么时候有人会使用工会?这是纯 C 时代的残余吗?

    我学到了 但并没有真正加入工会 我读过的每本 C 或 C 文本都会介绍它们 有时是顺便介绍 但它们往往很少给出关于为什么或在哪里使用它们的实际示例 工会何时在现代 甚至遗留 情况下有用 我唯一的两个猜测是 当您的工作空间非常有限时 或者当您
  • 如何将compile_commands.json与clang python绑定一起使用?

    我有以下脚本尝试打印给定 C 文件中的所有 AST 节点 当在具有简单包含的简单文件 同一目录中的头文件等 上使用它时 效果很好 usr bin env python from argparse import ArgumentParser
  • 如何在生产中禁用转储 symfony 功能

    如何禁用dump 功能 什么时候在生产环境中 如果我忘记了转储功能 它会崩溃并出现 500 错误 你应该删除dump 来自您的生产代码 它不必在那里 But as noted by Cerad 因为当您在签入之前忘记删除它们时可能会很烦人
  • 我如何告诉 PyCharm 参数的预期类型是什么?

    当涉及到构造函数 赋值和方法调用时 PyCharm IDE 非常擅长分析我的源代码并找出每个变量应该是什么类型 我喜欢它正确的时候 因为它为我提供了良好的代码完成和参数信息 并且如果我尝试访问不存在的属性 它会给我警告 但当涉及到参数时 它
  • 映射缩减组合器

    我有一个带有映射器 减速器和组合器的简单映射缩减代码 映射器的输出被传递到组合器 但是对于reducer来说 传递的不是combiner的输出 而是mapper的输出 请帮忙 Code package Combiner import jav
  • 如何在 React Native 中限制 google 登录到我公司的电子邮件域 (@company.com)?

    Question 阻止用户使用不以 mycompany com 结尾的电子邮件地址通过 Firebase Google 身份验证登录我们的内部应用程序的最佳方法是什么 Goal 防止用户使用错误的电子邮件登录应用程序 获取用户的公司电子邮件
  • Python pip install 以“命令错误,退出状态 1:...”结束

    我是 python 新手 我正在尝试运行一些需要一些库的基本代码 当我尝试安装库 例如 pip install matplotlib venn 时 我收到这个长错误 ERROR Command errored out with exit s
  • 如何使用 JavaScript 以编程方式打开文件选择器? [复制]

    这个问题在这里已经有答案了 可能的重复 在 JavaScript 中 我可以通过编程方式为文件输入元素触发 click 事件吗 我天真地尝试了以下方法 使用 JavaScript 以编程方式打开文件选择器 请参阅 fiddlehere
  • 每当 firebase 发生任何更改时,自动向所有用户发送通知 [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 当 Firebase 发生更改时 如何通知所有用户 我不想手动执行此操作 您应该使用由实时数据库触发器触发的 Firebase Cloud Function 请参阅文档here
  • 如何启动Manifest中提到的不存在的Activity?

    我正在尝试开发一个 动态 Android 应用程序 动态是指我在清单中列出了一个在运行时 构建 的活动 我可以很好地构建所需的活动 但是 当我尝试启动它时 我的应用程序失败了 java lang RuntimeException Unabl
  • std::sort 会改变相等元素的相对顺序吗?

    标准是否通过使用 std sort 保证相等元素的顺序不会改变 呃 忘记了这个术语 或者我是否需要考虑替代解决方案来实现此目标 std sort不保证稳定 您试图想到的术语 正如你猜想的那样 std stable sort保证稳定 std
  • 如何更改AlertDialog中的文本颜色

    如何更改 AlertDialog 中的文本颜色
  • 如何使中心裁剪图像响应?

    基于一个现有答案 我已经设法居中裁剪图像 不过 我在使中心裁剪图像具有响应能力时遇到了困难 Question 当我减小网络浏览器窗口的大小时 中心裁剪图像不能很好地缩小 相反 它保持固定状态height and width and spil
  • 多重继承的虚方法表

    我正在读这篇文章 虚拟方法表 上面文章中的例子 class B1 public void f0 virtual void f1 int int in b1 class B2 public virtual void f2 int int in
  • 在组件状态下从数组中删除元素

    我正在尝试找到在组件状态下从数组中删除元素的最佳方法 因为我不应该修改this state直接变量 是否有比我这里更好的方法 更简洁 从数组中删除元素 onRemovePerson function index this setState