带有计算属性名称的 Typescript setState

2024-02-27

我正在使用 Typescript 2.1。我有一个带有 2 个数字集合的状态的 React 组件,我不想重复 addItem 和 removeItem 方法并希望它们是通用的。这是代码:

type Collection = 'challenges' | 'disciplines';

type State = {
  lang: string;
  challenges: number[];
  disciplines: number[];
}

class MyComponent extends React.Component<{}, State> {    
  addItem = (collection: Collection, id: number) => {
    this.setState({
      [collection]: [...this.state[collection], id],
    });
  }

  removeItem = (collection: Collection, id: number) => {
    this.setState({
      [collection]: this.state[collection].filter(anId => anId !== id)
    });
  }

  ...

}

这就是我调用这些方法的方式:

this.addItem('disciplines', id)

现在在 addItem 方法中我收到编译错误:

类型参数 '{ [x: string]: number[]; }' 不可分配给 类型为 'Pick'。

类型“{ [x:字符串]”中缺少属性“lang”: 数字[]; }'。

有没有办法正确输入这个?谢谢!


这似乎是 TypeScript 编译器中的一个错误,所以我们必须等待修复。

跟踪的问题是here https://github.com/Microsoft/TypeScript/issues/13948.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有计算属性名称的 Typescript setState 的相关文章

  • 雅虎 OAuth2 隐式授予流程不适用于新的雅虎应用程序

    我有现有的网络应用程序和专用雅虎应用程序 https developer yahoo com apps 在职的 它用OAuth2 隐式授权流程 https developer yahoo com oauth2 guide flows imp
  • 实现悬停信息框

    我有一个日历 当用户将鼠标悬停在单元格上时 会出现一个很大的信息框 其中包含该日期的详细信息 虽然当用户离开时使信息框消失 但我遇到了一些麻烦 我基本上想要它 这样当鼠标光标移出信息框隐藏的日历单元格时 它就会消失 但我遇到了麻烦 因为mo
  • Javascript 在另一个函数中检测“Shift”键按下

    我正在从 Flash 影片 使用外部接口 调用我的 html 页面中的 Javascript 函数 并且我想知道调用该函数时用户是否按下了 Shift 键 例如 如果我通过鼠标单击调用该函数 这似乎很简单 因为我可以传递事件并检查 if e
  • 在 setInterval / setTimeout 中使用变量作为时间[重复]

    这个问题在这里已经有答案了 这是一个示例情况 var count time 1000 setInterval function count 1 time 上面的代码会将 count 变量加 1 即 1000 毫秒 看来 setInterva
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 如何使用 jQuery Ajax 将 PHP 数组值传递到另一个文件?

    这是我的代码
  • JavaScript:常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new
  • 在react-admin中通过REST API进行基于cookie的身份验证

    我是反应管理新手 我已经阅读了 stackoverflow 中的所有问题 也用谷歌搜索了我的问题 但没有找到任何有用的解决方案 我正在设置 React admin 来替换我的一个项目的现有管理页面 我通过 REST API 使用基于 coo
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • Firebase 身份验证在 iOS 登录时卡住,没有错误

    我已经使用电子邮件和密码设置了 firebase 身份验证登录的最基本实现 firebase auth signInWithEmailAndPassword email password then gt console log Logged
  • @aspnet/signalr 与 @microsoft/signalr javascript 库

    aspnet signalr 与 microsoft signalr javascript 库有什么区别 两者似乎都对 DotNetCore SignalR 有效 两者似乎都很活跃 在一些教程中 我找到 aspnet signalr 在Do
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • 尝试使用 Firebug 查找 JavaScript 文件中的函数

    我试图找到这个函数调用 myFooBar 该函数在某些 HTML 中内联引用 但页面加载了大量 JavaScript 并且在每个文件中搜索该函数需要相当多的工作 如何使用 Firebug 找到此函数所在的 JavaScript 文件 打开脚
  • 如何使用Create React App安装React

    嗨 我对反应真的很陌生 我不知道如何实际安装它 也不知道我需要做什么才能在其中编写代码 我下载了node js并且安装了v12 18 3以及NPM 6 14 6 但是每次我尝试在许多网站上提到的create react app安装方法中输入
  • JavaScript Promise 不执行 .then()

    我在 JavaScript 中的 Promise 方面遇到了一些问题 我想做的是获得一个地址列表 然后对于每个地址 我需要调用地理编码 API 来获取 lat lng 然后我将继续将标记与热图一起绘制 这是我的代码 let promiseK
  • Javascript onload 不起作用[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我正在使用
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur
  • DOM 解析器 Chrome 扩展内存泄漏

    问题 我开发了一个扩展程序 可以拦截 Web 请求 获取 Web 请求来源的 HTML 并对其进行处理 我使用 DOMParser 来解析 HTML 并且意识到 DOMParser 正在导致大量内存泄漏问题 最终导致 chrome 扩展崩溃
  • 如何获得 JavaScript 阶乘程序的循环来显示所使用的工作?

    你好 我面临着用 JavaScript 编写一个程序的挑战 尽管我对它不太了解 但它要求用户输入一个数字 然后计算该数字的阶乘 我使用了已经提出的问题并设法使计算正常工作 但无法获得所需的输出 我必须在以下输出中获取它 而不使用任何花哨的库

随机推荐

  • 将 Angular 7 部署到 github 页面

    我有一个简单的 Angular7 应用程序 它只有两条路线 主要是 文章 如果你在本地测试它 它会起作用 但是当你放到 github 页面上时 它只会加载页面的 css 我按照以下角度文档进行部署文档 https angular io gu
  • 在C#中获取主目录的路径?

    好的 我已经查过了Environment SpecialFolder 但里面没有任何东西 我想在C 中获取当前用户的主目录 例如 c documents and settings user在XP下 c users user在 Vista 下
  • 如何找到给定数组中总和为“N”的所有匹配数字

    我的目标是找到所有可能的组合 总和达到给定的总数 例如 如果数组是 2 59 3 43 5 9 8 62 10 4 如果总数为 12 则可能的组合为 2 10 3 9 8 4 5 3 4 这是我编写的第一组代码 想知道对此可以进行的最佳改进
  • 跨源请求被阻止:同源策略不允许读取 http://........ 的远程资源

    我正在尝试使用 ajax 主要通过 javascript 从 Web 应用程序与企业应用程序进行通信 我尝试了很多方法来解决这个问题但没有成功 我在那里看到了几个在线 httppost 工具 我可以看到响应文本 但我这边并没有发生这种情况
  • 如何在 iframe 中正确显示 SSRS 站点

    I have been working on a project where I need to load a ssrs site within an iframe The iframe is acutally using the tele
  • android webview 中的 onShowFileChooser() 只能运行一次

    我需要从设备中选取图像并将其上传到服务器 第一次 当我选择图像时 onShowFileChooser 被调用并且一切正常 但是 当我尝试再次单击上传时 onShowFileChooser 永远不会被调用 但它适用于非棒棒糖设备 每当我单击上
  • 无法从 Google Places API 获取特殊营业时间

    特别营业时间在以下位置进行营销 记录谷歌我的商家 see https support google com business answer 6303076 https support google com business answer 6
  • Java时间解析“Jun 26th 2021, 04:30:15 pm NY”

    我有一个看起来像这样的字符串 String str Jun 26th 2021 04 30 15 pm NY 我想将其转换为ZonedDateTime 为此我使用DateTimeFormatterBuilder DateTimeFormat
  • 显式非单参数构造函数

    谁能解释为什么非单参数构造函数标记为显式编译 据我了解 这在这里绝对是无用的关键字 那么为什么它编译时没有错误呢 class X public explicit X int a int b 在 C 03 中 在这种特殊情况下 标记两个参数构
  • wxWidgets:如何捕捉wxListCtrl上的左键单击?

    我想将复选框添加到 wxListCtrl 这工作正常 只是当鼠标单击项目时似乎没有 EVT LIST ITEM CLICK 或 EVT LIST ITEM LEFT CLICK 事件来捕获 以便可以切换图像 有右键单击和中键单击的事件 但没
  • PHP CURL - 如何判断请求的整个文件是否未完全下载

    我使用 CURL 和代理来获取一些 xml 文件 有时当我尝试加载 使用 xml simplexml load string 时 只有部分 XML 文档会通过并失败 我想像 if curl errno ch error curl error
  • jQuery - 即使单击列表也会触发,但不会触发嵌入其中的复选框

    我正在制作一个简单的网络应用程序 在一部分中 我动态创建了一个列表 然后我有一个事件 当单击列表中的任何元素时会触发 document on click list not checkbox function console log list
  • 递归块过早释放

    我写了一个递归块如下these http ddeville me 2011 10 recursive blocks objc 指导方针 NSMutableArray groups NSMutableArray arrayWithArray
  • 从 Dns.GetHostEntry() 获取 IPv4 地址

    我这里有一些代码在 IPv4 机器上运行得很好 但在我们的构建服务器 IPv6 上却失败了 简而言之 IPHostEntry ipHostEntry Dns GetHostEntry string Empty GetHostEntry 的文
  • C++ 返回字符串不断出现垃圾

    为什么这里的返回字符串上有各种垃圾 string getChunk ifstream in char buffer 5 for int x 0 x lt 5 x buffer x in get cout lt lt x lt lt lt l
  • 未找到符号:__PyCodecInfo_GetIncrementalDecoder

    自从从 Homebrew Python 2 7 11 从 2 7 10 开始 更新后 我突然无法从 PyCharm IDE 控制台在 PyPi 上测试注册我的包 运行 作为 外部工具 python B setup py register r
  • 显示 Pandas 数据框的所有行和列[重复]

    这个问题在这里已经有答案了 我正在 Visual Studio 代码中使用 python 3 和 pandas 包 但 print 函数无法正确显示 例如 当我使用 df head 时 它看起来不错 但是 如果我使用 print 语句 我将
  • 在哪里可以找到被新功能弃用的 Android 功能列表?

    Android 开发者网站中是否有某些内容显示了 API 中的某些附加功能已弃用的内容 例如 一个人如何知道 Fragment 不赞成使用什么内容 Update 新的发行说明可以在此处的新 URL 上以更易于阅读的格式获取 https de
  • 从字符串中删除非 utf8 字符

    我在从字符串中删除非 utf8 字符时遇到问题 这些字符无法正确显示 字符是这样的 0x97 0x61 0x6C 0x6F 十六进制表示 去除它们的最佳方法是什么 正则表达式还是其他什么 如果您申请utf8 encode 对于已经是 UTF
  • 带有计算属性名称的 Typescript setState

    我正在使用 Typescript 2 1 我有一个带有 2 个数字集合的状态的 React 组件 我不想重复 addItem 和 removeItem 方法并希望它们是通用的 这是代码 type Collection challenges