Can only update a mounted or mounting component. This usually means you called setState() on an unmo

最新推荐文章于 2021-04-27 13:59:42 发布
原创 最新推荐文章于 2021-04-27 13:59:42 发布 · 788 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#react #render #setState
本文解析了React中控制台警告“Can only update a mounted or mounting component”的原因，通常是因为在componentWillMount和componentDidMount中错误地使用了setState。componentWillMount中使用setState不会触发重新渲染，而componentDidMount中使用则会触发。解决方法是在componentDidMount中使用setState。

  1. 控制台出现警告：
    Warning: Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component

  2. 原因：
    React生命周期的componentWillMount和componentDidMount中的setState使用错误。

  • componentWillMount
    在render()方法之前执行，该方法中使用setState不会发生重新渲染。

  • componentDidMount
    在render()方法之后立即执行，该方法中使用setState会触发重新进行渲染。re

  1. 解决办法：
    setState只能用在componentDidMount中，而不是componentWillMount
React异步请求数据出现setState(...): Can only update a mounted or mounting component...
dengdengda的博客
09-08 3449
我们可能对一个没有装载的组件执行了setState()操作,这种情况会出现在callback中，我们的异步请求返回数据之前，组件可能就已经被卸载了，等数据回来再使用setState就会报出上面的警告，所以我们应该手动在componentWillUnmount里去取消callback在它被unmounting之前。
关于Warning: setState(...): Can only update a mounted or mounting component. 警告的解决方案
sushaning的博客
10-27 794
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. 关于react中切换路由时报以上警告，实际的原因是因为在组件挂载（mounted）之后进行了异步操作。 比如ajax请求或者设置了定时器等，而你在回调函数中进行了setState操作。
setState(...): Can only update a mounted or mounting component. This usually means you called
qq_43511140的博客
04-27 376
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the SalesInfo component. 出现这种情况，是因为组件卸载之后，调用了 setState。 通常会出现在以下两个场景.
Warning: setState(...): Can only update a mounted or mounting component. This usually means you call...
weixin_30412167的博客
12-29 323
原因主要是： 这个错误在配合 多次Route的时候会经常出现 Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the und...
setState(...): Can only update a mounted or mounting component. This usually means you called setSta
qq_32234865的博客
04-08 497
错误 setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. 原因 在componentWillMount方法里调用异步方法，比如发请求，然后在异步回调里SetState,有可能界面...
React异步请求数据出现setState(...): Can only update a mounted or mounting component...
FireBird_one的博客
09-16 596
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the xxx comp...
运行报错 Can only update a mounted or mounting component. This usually means you called setState() on an...
weixin_30924087的博客
01-19 417
内存泄漏，需要销毁 componentDidMount(){ this.timer=setInterval ( ()=>{ let opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity...
关于Warning: setState(...): Can only update a mounted or mounting component. This usually means you ca
qwqasd123456的博客
01-08 683
关于Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.的解决方案 关于react中切换路由时报以上错误，实际的原因是因为在组件挂载（m...
关于Warning: setState(...): Can only update a mounted or mounting component. This usually means you ...
abc2346789的博客
12-07 294
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for th...
setState(…): Can only update a mounted or mounting component. This usually means you called setState
baozhuona的博客
08-15 955
1.遇到的八阿哥： Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the u...
Warning: setState(...): Can only update a mounted or mounting component. This usually means you call
漫游学海之旅
03-13 2057
类似这个错误 出现这个错误，大部分是因为使用了fetch获取数据，并在then中调用了setState() class Overall extends Component { componentDidMount() { this.fetchData(); } fetchData(){ fetch(url).then(() =&...
《React-Native系列》45、踩坑记录
等待就是浪费青春
03-16 7915
记录几个最近在项目中遇到的坑，RN版本使用0.29.2。1、在Android平台上Text标签的 lineHeight 需要设置成int ，否则会crash；在iOS平台上没有问题。如下图：com.facebook.react.bridge.UnexpectedNativeTypeException: TypeError: expected dynamic type `int64', but ha
React报错Warning:setState(...):Can only update a mounted or mounting component...
kongjunchao159的博客
03-23 7180
React项目中报错： 实际在调试过程中发现，仅当在页面间快速切换的时候会出现该警告，原因是组件中的setState方法（也有一些setTimeout情况下）是异步执行的，当你在快速切换组件的时候，组件虽然已经被卸载，但是该方法还在异步调用，所以报错 解决方案： 组件将要被卸载的时候，会触发React中的componentWillUnmount方法，该方法是React生命周期的一部分
使用reactjs遇到Warning: setState(...): Can only update a mounted or mounting component.
热门推荐
小楼一夜听春雨
10-27 1万+
前端数据大部分来源于后端，需要向后端发起异步请求，而在使用reactjs的时候，如果这个组件最初加载的时候就发起这个异步请求，然后在返回结果中进行setState({})，这时候有可能会遇到这个警告：Warning:setState(...): Can only update a mounted or mounting component. This usually means you called
react警告:Can only update a mounted or mounting component. This usually means
weixin_34117522的博客
02-08 234
报这个错归根到底的原因是：试图在页面卸载后操作页面元素，比如以下几种实例： 1.window的几个事件。例如onscroll、ontouchmove等，在某一个页面绑定了事件函数fun，但是当此页面卸载时，事件函数fun还存在，可能fun试图操作被卸载组件的某个元素，因此报错。 解决方式： 在componentWillUnmount函数中，取消掉事件绑定，以onscroll事件为例： compon...
偶遇this之坑
梦里回忆-专栏
01-09 1661
偶遇this之坑 事件：在使用reactJS时候，写了一个上拉加载的方法。但在当前页面不进行上拉，跳转至其他页面后在回退回来进行上拉加载，就会出现问题warning警告，如下： Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setS...
express使用webpack热加载替换时候遇到的坑
binggoogle的专栏
11-09 8388
问题1： bundle.js:25  GET http://127.0.0.1:3000/public/assets/f4827a9158e0a42d64c7.hot-update.json 404 (Not Found) 保存componet文件时候提示hot-update.json文件404。 修复方案：  Webpack 的文档如下 The publicPath spe
组件卸载的重要性
水色陀螺
12-28 1558
今天报了这个， index.bundle:6990 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值