ReactJS:未捕获(在promise中) this.setState不是函数_TypeError: this.setState不是reactjs中的函数_未捕获错误:未捕获(在promise中)：TypeError: this.xxxService.getSomething(...).toPromise不是函数 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Error Boundaries是这么实现的，还挺巧妙

在Error Boundaries的「子孙组件」中发生的所有「React工作流程内」的错误都会被Error Boundaries捕获。...步骤1:捕获错误首先来看「工作流程中的错误都是何时被捕获的」。...在React中有两个「执行用户自定义callback」的API：对于ClassComponent， this.setState(newState, callback)中newState和callback..., () => { // 用于抛出“未捕获的错误”及“React的提示信息”的callback }) 所以，Error Boundaries的实现可以看作是：React利用已有API实现的新功能。...最后，给你留个作业，在官方文档[1]介绍了4种情况的错误不会被Error Boundaries捕获。利用本文知识，你能分析下他们为什么不会被捕获么？

7601 0

性能优化竟白屏，难道真是我的锅？

componentDidCatch(error, errorInfo)：在commit phase 阶段，捕获子节点中发生的错误，因此在该方法中可以执行有副作用的代码，例如用于打印上报错误日志。...推荐大家在 getDerivedStateFromError() 中处理 fallback UI，而不是在 componentDidCatch() 方法中，componentDidCatch() 在未来的...4.3 解决方案因此，想要解决网络加载错误问题并重试，就得在声明代码 import 的时候处理，因为import 返回的是一个Promise，自然就可以用 .catch 捕获异常。...该工具函数如下： /** * * @param {() => Promise} fn 需要重试执行的函数 * @param {number} retriesLeft 剩余重试次数 * @param...在本次的问题处理过程中，其实还有一些值得探究的地方： ErrorBoundary 捕获错误的原理是啥？为什么不能处理本身错误？

8652 0

您找到你想要的搜索结果了吗？

是的

没有找到

性能优化竟白屏，难道真是我的锅？

componentDidCatch(error, errorInfo)：在commit phase 阶段，捕获子节点中发生的错误，因此在该方法中可以执行有副作用的代码，例如用于打印上报错误日志。...推荐大家在 getDerivedStateFromError() 中处理 fallback UI，而不是在 componentDidCatch() 方法中，componentDidCatch() 在未来的...4.3 解决方案因此，想要解决网络加载错误问题并重试，就得在声明代码 import 的时候处理，因为import 返回的是一个Promise，自然就可以用 .catch 捕获异常。...该工具函数如下： /** * * @param {() => Promise} fn 需要重试执行的函数 * @param {number} retriesLeft 剩余重试次数 * @param...在本次的问题处理过程中，其实还有一些值得探究的地方： ErrorBoundary 捕获错误的原理是啥？为什么不能处理本身错误？

1.2K1 0

「React进阶」我在函数组件中可以随便写 —— 最通俗异步组件原理

不可能的事我的函数组件中里可以随便写，很多同学看到这句话的时候，脑海里应该浮现的四个字是：怎么可能？因为我们印象中的函数组件，是不能直接使用异步的，而且必须返回一段 Jsx 代码。...首先先来看一下 jsx ，在 React JSX 中代表 DOM 元素，而代表组件， Index 本质是函数组件或类组件。...，是不是也可以在 componentDidCatch 接收到。...7.jpg 如上所示，Promise 对象没有被正常捕获，捕获的是异常的提示信息。在异常提示中，可以找到 Suspense 的字样。...到此为止，可以总结出： componentDidCatch 通过 try{}catch(e){} 捕获到异常，如果我们在渲染过程中，throw 出来的普通对象，也会被捕获到。

3.6K3 0

一文详聊前端异常原理

当编译器检测到一个函数调用是尾递归的时候，它就覆盖当前的活动记录而不是在栈中去创建一个新的。 5. Error 与自定义异常 Error 是所有错误的基类，其他错误类型继承该类型。...React 在 ErrorDecoder 模块中对自定义错误做了介绍。...每个错误都有 ID，比如 ID:185 错误是：在 componentDidUpdate 函数中调用了 this.setState() 方法，导致 componentDidUpdate 陷入死循环。...在报错后会输出带有异常介绍链接的日志. https://reactjs.org/docs/error-decoder.html/?invariant = 异常 ID....来捕获接口状态总结本文详细讲解了 ECMA 中 8 种异常的产生原理，涉及了 LHS&RHS、递归优化、ScriptError、finally、Promise 等知识点，希望在处理异常的工作中能给你带来帮助

1.4K4 0

android onresume函数,android – 在Activity中重新创建后未调用onResume

在应用程序设置中进行某些更改时，我在recreate的onActivityResult中调用MainActivity。重新创建后，不调用onResume。...我也收到错误：E/ActivityThread: Performing pause of activity that is not resumed 从this问题开始，我了解到不能从onResume调用此函数...最佳答案在onResume()之前调用OnActivityResult()。...您可以做的是在OnActivityResult()中设置一个标志，您可以在onResume()中检入，如果该标志为true，则可以重新创建活动。...您实际上可以做的是完成活动并开始相同的活动，而不是重新创建活动。您将获得相同的效果。

3.3K2 0

web前端学习工作笔记（九）

useState不能用在class中，相当于class中this.setState 业务组件，数据尽量自己处理 react表单列表数据校验，可以把table放在finalForm中，但是不太好 mr可以...commit之前 git reset HEAD^ tea框架，table的列名不要和recordKey一样，不然会光标丢失 react16.production.js:14 Uncaught (in promise...) Invariant Violation: Minified React error #85; visit https://reactjs.org/docs/error-decoder.html?...原因:this.setState(price),没有加{}

2851 0

在 React 应用中获取数据

然而，它并不是全能的 web 框架。它只关注 MVC 中的 view 模块。 React 整个生态系统可以解决其它问题。这篇教程中，你将会学到如何在 React web 应用中获取数据并显示。...这篇教程的重点不是它，它可以提供远程 API 用来演示如何在 React 中获取数据。...) 方法中初始化异步数据，但是，这有可能会在组件未装载前完成数据请求。...我们的应用中只是在 componentDidMount() 方法中启动一个 5s 的定时器更新数据，然后，在 componentWillUnmount() 方法清除定时器 componentDidMount...我们也了解到两个基于 promise 的库：fetch API 和 axios.js。现在，你可以构建自己的 React 应用了。在最近几年中，React 越来越流行。

8.4K2 0

为什么说Suspense是一种巨大的突破？

组件可以在其render方法中抛出Promise（或者在组件渲染期间调用的任何东西，例如新的静态方法getDerivedStateFromProps); React捕获抛出的Promise并在组件树上查找最接近的...为此，我们使用某种形式的缓存来存储数据，在每次渲染时，我们通过这个缓存来确定数据是否已经可用（然后它只是从变量中读取它), 在这种情况下它会触发fetch,并抛出Promise的结果来让React捕获。...Suspense的核心概念与error boundaries非常相似，error boundaries在React 16中引入，允许在应用程序内的任何位置捕获未捕获的异常，然后在组件树中展示跟错误信息相关的组件...丑陋的三元表达式→糟糕的DX：加载和错误状态是通过渲染中的三元组定义的，从而使代码不必要地复杂化。我们不是描述了一个渲染函数，我们描述了三个。 ?...当然，我们也可以在组件树的更高一个层次来执行data fetching，而不是在组件中触发它，但这并没有真正解决问题，它只是将其移动到其他地方。

1.5K3 0

深度剖析React懒加载原理

这里举一个平时开发中可能会遇到的场景，比如某个体积相对比较大的第三方库或插件（比如JS版的PDF预览库）只在单页应用（SPA）的某一个不是首页的页面使用了，这种情况就可以考虑代码分割，增加首屏的加载速度...import() 原理import() 函数是由TS39提出的一种动态加载模块的规范实现，其返回是一个 promise。...在浏览器宿主环境中一个import()的参考实现如下：function import(url) { return new Promise((resolve, reject) => { const...Suspense 原理由于 React 捕获异常并处理的代码逻辑比较多，这里就不贴源码，感兴趣可以去看 throwException 中的逻辑，其中就包含了如何处理捕获的异常。...简单描述一下处理过程，React 捕获到异常之后，会判断异常是不是一个 thenable，如果是则会找到 SuspenseComponent ，如果 thenable 处于 pending 状态，则会将其

9465 0

深度剖析React懒加载原理_2023-03-01

这里举一个平时开发中可能会遇到的场景，比如某个体积相对比较大的第三方库或插件（比如JS版的PDF预览库）只在单页应用（SPA）的某一个不是首页的页面使用了，这种情况就可以考虑代码分割，增加首屏的加载速度...import() 原理 import() 函数是由TS39提出的一种动态加载模块的规范实现，其返回是一个 promise。...在浏览器宿主环境中一个import()的参考实现如下： function import(url) { return new Promise((resolve, reject) => { const...Suspense 原理由于 React 捕获异常并处理的代码逻辑比较多，这里就不贴源码，感兴趣可以去看 throwException 中的逻辑，其中就包含了如何处理捕获的异常。...简单描述一下处理过程，React 捕获到异常之后，会判断异常是不是一个 thenable，如果是则会找到 SuspenseComponent ，如果 thenable 处于 pending 状态，则会将其

6882 0

前端 JS 异常那些事

如果都没有捕获，会抛出类似 unCaughtError，表示发生了一个异常，未被捕获的异常通常会被打印在控制台上 error 对象 Error本身作为函数直接调用和被 new 调用的效果是一样的 const...监听全局异常和未捕获的 Promise 异常并进行相关处理 function onReject(e) { // ......同理，因为事件回调函数的处理不是在 React 处理阶段（初始化或者事件处理setState驱动 react 进行下次渲染的），所以事件处理函数中的报错同样不会触发白屏 Error Boundary 既然白屏问题如此严重...用于捕获渲染时的错误，也仅能捕获上面提到的白屏异常（如异步错误等也是没有办法被捕获到），也就是说如果我们在Error Boundary中捕获到错误并上报，这个错误通常是非常严重的。...，则 promise 异常也会被捕获； errorCaptured errorCaptured 入参和 errorHandler 一样，它是 vue 组件的钩子函数，作用是捕获来自后代组件（注意不包含本组件

951 0

「React进阶」深度剖析 React 异步组件前世与今生

二初识：异步组件 1 什么是异步组件我们先来想想目前的React应用中使用ajax或者fetch进行数据交互场景，基本上就是这样的，在类组件中componentDidMount和函数组件effect...fallback的内容，弥补请求数据中过渡效果，尽管这个模式在现在版本中还不能正式使用，但是将来 React 会支持这样的代码形式。...如果某个组件定义了 componentDidCatch，那么这个组件中所有的子组件在渲染过程中抛出异常时，这个 componentDidCatch 函数就会被调用。...我们完全可以理解React.lazy用Promise模拟了一个请求数据的过程，但是请求的结果不是数据，而是一个动态的组件。...Promise，绑定 Promise.then成功回调，回调里得到我们组件 defaultExport，这里要注意的是，如上面的函数当第二个if判断的时候，因为此时状态不是 Resolved ，所以会走

1.7K3 0

如何搭建前端异常监控系统

true，则阻止执行默认事件处理函数。...这些 error 事件不会向上冒泡到 window，不过（至少在 Firefox 中）能被单一的 window.addEventListener 捕获。...：', err); }); Promise.reject('promise'); 结果：捕获异常：PromiseRejectionEvent {isTrusted: true, promise: Promise..., vm, info) => { console.error('捕获异常：', err, vm, info); } React React16，提供了一个内置函数 componentDidCatch...：事件处理程序异步代码（例如 setTimeout 或 requestAnimationFrame 回调）服务器端渲染在错误边界本身（而不是其子级）中引发的错误 iframe 由于浏览器设置的“

1.2K0 0

JavaScript 测试系列实战（三）：使用 Mock 模拟模块并处理组件交互

在之前的两篇教程中，我们学会了如何去测试最简单的 React 组件。在实际开发中，我们的组件经常需要从外部 API 获取数据，并且组件的交互逻辑也往往更复杂。...componentDidMount 生命周期函数中通过 axios 模块异步获取数据。...，通过使用它，我们可以得到返回的 promise，我们可以从 value 属性中取到这个 promise。...从测试返回 promise 是确保 Jest 等待其异步方法执行结束的一种方法。小结在本文中，我们介绍了 mock 模块，并将其用于伪造API调用。...让测试通过 React文档[3] 里面提到：我们只能从函数式组件或其他 Hooks 中调用 Hooks。

4.8K2 0

C++11 在析构函数中执行lambda表达式(std::function)捕获this指针的陷阱

test_lambda_base 类的功能很简单，就是在析构函数中执行构造函数传入的一个std::function对象。...->清除成员变量->析构基类部分（从右到左）->析构虚基类部分所以上面代码中在test_lambda_base的析构函数中执行子类test_lambda的成员变量fun时，fun作为一个std::...因为问题的原因不是lambda表达捕获的this指针不对，而是在基类的析构函数中，lambda表达式所捕获的this指针所指向的子类对象部分的数据已经无效，不可引用了。...，将fun对象复制了一份，所以当代码执行到lambda表达式时,fun并不是子类对象中已经析构的那个无效对象了。...总结如果在基类的析构函数中执行子类提供lambda表达式，lambda表达式中要避免使用子类中类成员变量。

1.5K1 0

前端ReactJS技术介绍

原理在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作，而复杂或频繁的DOM操作通常是性能瓶颈产生的原因。...学习一次，到处都可以使 React并没有依赖其它的技术栈，因此可以在老旧项目中使用ReactJS开发新功能，不需要重写存在的代码。...React可以在浏览器端或服务端进行渲染，甚至借助于React Native，可在移动设备中渲染。...，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。...ReactJS在老旧项目中的应用限制要与现有前端页面技术无缝衔接没有前端编译工具没有前端模块依赖工具，全凭script标签引入目前的方案将常用的JS库文件（ReactJS库、组件库、工具库）

5.4K4 0

React学习(九)-React中发送Ajax请求以及Mock数据

撰文 | 川川前言在React中,render函数返回的结果,取决于组件的props和state 我们都知道UI页面上的数据不是写死的,往往是从后端的数据接口中拿到的然后将真实的数据填充到页面上...当然对于UI以什么样的方式来显示,你自己可以用css进行控制的，这并不是文本的重点在哪个生命周期函数中发送AJax请求把Ajax请求放在componentWillMount组件即将被挂载的函数中也是可以的...({ list: goodlists }) }, // 注意在这里处理错误时,与axios有些区别,不是用catch()去捕获错误,因为使用catch...文档的方式三:使用JQ的Ajax jquery是一个库,在React中你想要用时,得先安装,使用该方法请求数据不是不可以,但是不推荐 npm install -S jquery 或者 cnpm install...request-promise库,调用一个rp函数 import rp from 'request-promise' 然后在componentDidMount内进行Ajax的数据请求,如下代码所示 componentDidMount

4.6K3 1

React基础(9)-React中发送Ajax请求以及Mock数据

image.png 前言在React中,render函数返回的结果,取决于组件的props和state 我们都知道UI页面上的数据不是写死的,往往是从后端的数据接口中拿到的然后将真实的数据填充到页面上...,你自己可以用css进行控制的，这并不是文本的重点在哪个生命周期函数中发送AJax请求把Ajax请求放在componentWillMount组件即将被挂载的函数中也是可以的但是官方推荐放在componentDidMount...({ list: goodlists }) }, // 注意在这里处理错误时,与axios有些区别,不是用catch()去捕获错误,因为使用catch...文档的方式三:使用JQ的Ajax jquery是一个库,在React中你想要用时,得先安装,使用该方法请求数据不是不可以,但是不推荐 npm install -S jquery 或者 cnpm install...request-promise库,调用一个rp函数 import rp from 'request-promise' 然后在componentDidMount内进行Ajax的数据请求,如下代码所示 componentDidMount

2K3 0

如何搭建前端异常监控系统

若该函数返回true，则阻止执行默认事件处理函数。...这些error事件不会向上冒泡到window，不过（至少在Firefox中）能被单一的window.addEventListener捕获。...：', err); }); Promise.reject('promise'); 结果：捕获异常：PromiseRejectionEvent {isTrusted: true, promise: Promise...componentDidCatch(error, info) { console.error('捕获异常：', error, info); } 但是，推荐ErrorBoundary 用户界面中的JavaScript...：事件处理程序异步代码（例如setTimeout或requestAnimationFrame回调）服务器端渲染在错误边界本身（而不是其子级）中引发的错误 iframe 由于浏览器设置的“同源策略

1.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭