javascript - React 组件抛出的错误，被不相关的 promise 的 catch block 捕获

coder 2024-12-31 原文

这是我遇到的。在 React 组件的渲染函数的某处，我有这个:

{first_name} {last_name}

我用这个替换了它:

{first_name.toUpperCase()} {last_name.toUpperCase()}

我的应用程序无法再登录。我正在使用 Axios 与后端对话。 Axios 是基于 promise 的。在我进行了上述更改之后。它显然开始执行我的 login API 调用的 then 和 catch block 。当我在 catch block 中打印响应时。

function login(data, success, error) {
  axios.post('/login',
    JSON.stringify(data),
    {
      baseURL: config.apiUrl,
      headers: { 'Content-Type': 'application/json; charset=utf-8' }
    })
  .then((response) => success(response.data))
  .catch((response) => {
    console.log(response)
    error(response.status)})
}

我得到以下信息:

TypeError: Cannot read property 'toUpperCase' of undefined

上面的组件(它是一个愚蠢的组件，只是在页面上显示 Prop 的东西)和 API 调用代码之间绝对没有任何关系。

这不是我第一次在我的应用程序中遇到这个问题。以前有没有人遇到过这样的事情？我知道组件中的变量未定义，这就是出现错误的原因。我的问题是它如何进入应用程序另一端某处的 promise 的 catch block 。

最佳答案

事实证明，在 JavaScript 中，任何 catch block 都会捕获代码中任何地方抛出的任何错误。这是设计使然。

这是 spec :

The throw statement throws a user-defined exception. Execution of the current function will stop (the statements after throw won't be executed), and control will be passed to the first catch block in the call stack. If no catch block exists among caller functions, the program will terminate.

一种解决方法是对您引入的所有 promise 使用一个处理程序，这将 console.log 它不期望的任何内容，例如:

export function apiErrorHandler(handler) {
  return (error) => {
    if (error.stack) {
      throw error
    }
    if (error.status && error.data) {
      handler(error)
    } else {
      console.error('Unknown type of error thrown during service request or its handler:', error)
    }
  }
}

然后将其插入 axios 服务:

export function serviceGetContacts(success, error) {
  axios.get(`/contacts`, cfg())
    .then((response) => success(response.data))
    .catch(apiErrorHandler(error))
}

关于javascript - React 组件抛出的错误，被不相关的 promise 的 catch block 捕获，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35344994/

有关javascript - React 组件抛出的错误，被不相关的 promise 的 catch block 捕获的更多相关文章

ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2
我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que
ruby - 在 Ruby 中重新分配常量时抛出异常？ - 2
我早就知道Ruby中的“常量”(即大写的变量名)不是真正常量。与其他编程语言一样，对对象的引用是唯一存储在变量/常量中的东西。(侧边栏:Ruby确实具有“卡住”引用对象不被修改的功能，据我所知，许多其他语言都没有提供这种功能。)所以这是我的问题:当您将一个值重新分配给常量时，您会收到如下警告:>>FOO='bar'=>"bar">>FOO='baz'(irb):2:warning:alreadyinitializedconstantFOO=>"baz"有没有办法强制Ruby抛出异常而不是打印警告？很难弄清楚为什么有时会发生重新分配。最佳答案
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby-on-rails - 在具有 ActiveRecord 条件的相关模型中按字段排序 - 2
我正在尝试按Rails相关模型中的字段进行排序。我研究的所有解决方案都没有解决如果相关模型被另一个参数过滤？元素模型classItem相关模型:classPriority我正在使用where子句检索项目:@items=Item.where('company_id=?andapproved=?',@company.id,true).all我需要按相关表格中的“位置”列进行排序。问题在于，在优先级模型中，一个项目可能会被多家公司列出。因此，这些职位取决于他们拥有的company_id。当我显示项目时，它是针对一个公司的，按公司内的职位排序。完成此任务的正确方法是什么？感谢您的帮助。PS-我
ruby-on-rails - Rails - Carrierwave 进程抛出 ArgumentError : no images in this image list - 2
在尝试实现应用auto_orient的过程之后!对于我的图片，我收到此错误:ArgumentError(noimagesinthisimagelist):app/uploaders/image_uploader.rb:36:in`fix_exif_rotation'app/controllers/posts_controller.rb:12:in`create'Carrierwave在没有进程的情况下工作正常，但在添加进程后尝试上传图像时抛出错误。流程如下:process:fix_exif_rotationdeffix_exif_rotationmanipulate!do|image|
ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2
我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？最佳答案尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby - 使用指向 ruby 可执行文件的符号链接(symbolic link)时查找相关库 - 2
假设您有一个可执行文件foo.rb，其库bar.rb的布局如下:/bin/foo.rb/lib/bar.rb在foo.rb的header中放置以下要求以在bar.rb中引入功能:requireFile.dirname(__FILE__)+"../lib/bar.rb"只要对foo.rb的所有调用都是直接的，这就可以正常工作。如果你把$HOME/project和符号链接(symboliclink)foo.rb放入$HOME/usr/bin,然后__FILE__解析为$HOME/usr/bin/foo.rb,因此无法找到bar.rb关于foo.rb的目录名.我意识到像rubygems这
HarmonyOS原子化服务开发相关术语 - 2
术语中文解释Ability原子化服务帮助用户完成任务的原子化服务，和用户的意图进行关联。Fulfillment服务履行通过图标，卡片，语音等形式呈现用户意图。开发者通过接口的方式，处理用户意图，返回内容。Intent意图用于表达用户想要达成的目标或完成的任务。HUAWEIAssistant智能助手“无微不智”的个人助手，通过不断的学习用户的使用习惯，不断的为用户提供贴心的精准的便捷的个性化服务。AISearch全局搜索用户可快速搜索关键词，与之匹配的原子化服务则会出现在搜索结果中。SmartService智慧服务用户订阅原子化服务，在到达特定触发条件（时间、地点、事件）后，卡片推送至用户智能助
H2数据库配置及相关使用方式一站式介绍（极为详细并整理官方文档） - 2
目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库？1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动：2.1.2.3启动后控制台页面：2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式

javascript - React 组件抛出的错误，被不相关的 promise 的 catch block 捕获

有关javascript - React 组件抛出的错误，被不相关的 promise 的 catch block 捕获的更多相关文章

随机推荐