You are calling ReactDOM.unmountComponentAtNode() on a container解决办法

最新推荐文章于 2024-01-12 16:18:26 发布
最新推荐文章于 2024-01-12 16:18:26 发布
阅读量1.2k 收藏
点赞数
分类专栏： 每次自闭又解闭 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41649740/article/details/125367952
版权

这里先贴一下报错的图和报错涉及的代码

在这里插入图片描述

ReactDOM.unmountComponentAtNode(document.getElementById('root'))

先认真思考一下，第一个warning貌似给出了解决方案，于是傻傻得堆了代码root.unmount,但是忘记把root引入，所以造成了undefined。于是通过默认暴露，再引入root即可。报错原因归根结底为不是一个版本的写法写到一起。我用的是react18.2.0，很多写法都和以前不同。详情可以参考https://reactjs.org/docs/react-dom-client.html

昊温柔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Microsoft Teams Calling Solutions Calling Solutions.pdf
09-24
Microsoft Teams Calling Solutions 是微软公司的一项电话解决方案，旨在帮助企业和中小型企业（SMB）提高通信效率，降低成本。根据 Forrester 的研究报告，本解决方案可以为企业和 SMB 带来经济效益。 标题解释 ...
java 中 poi解析Excel文件版本问题解决办法
08-29
You are calling the part of POI that deals with OLE2 Office Documents. You need to call a different part of POI to process this data (eg XSSF instead of HSSF)”。 解决办法 -------- 解决这个问题的...
Warning: You are calling ReactDOM.unmountComponentAtNode() on a container that was previously passed
qq_36164225的博客
07-21 1672
报错react_devtools_backend.js2450WarningYouarecallingReactDOM.unmountComponentAtNode()onacontainerthatwaspreviouslypassedtoReactDOMClient.createRoot().Thisisnotsupported.Didyoumeantocallroot.unmount()?render后记得。
使用createRoot()方法创建的react组件在调用ReactDOM.unmountComponentAtNode()方法卸载报错的解决方案
qq_54896312的博客
11-25 1697
使用createRoot()方法创建的react组件在调用ReactDOM.unmountComponentAtNode()方法卸载报错的解决方案。Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state a
【React】unmountComponentAtNode卸载组件
流萤梦的博客
08-27 4371
从 DOM 中卸载组件，会将其事件处理器（event handlers）和 state 一并清除。如果指定容器上没有对应已挂载的组件，这个函数什么也不会做。如果组件被移除将会返回 true，如果没有组件可被移除将会返回 false。很明显，卸载不成功。这也是我踩坑的地方，如果想要插入的元素也被卸载掉，可以插入到。但这不重要，项目目前的版本我也升不上去（历史原因）。没想到，这两天还在这里栽了跟头，头大。的节点中，不要直接插入到根节点。，点击卸载组件按钮之后，不见了，说明卸载成功了。的时候，会被卸载掉吗？...
易语言源码易语言Magic Dll Calling源码.rar
02-17
易语言是一种基于中文编程的计算机程序设计语言，旨在降低编程技术门槛，让更多人可以进行程序开发。"Magic Dll Calling" 是易语言中一个...通过分析和实践，开发者能够提升自己的编程技巧，增强解决复杂问题的能力。
mmu_context.rar_The Calling
09-14
2. **切换MMU上下文**：“Makes the calling kernel thread take on the specified mm context.” 这句话描述的是内核线程如何改变其当前的MMU上下文，使其适应指定的内存管理上下文。在多任务环境中，进程间的切换...
ReactDom（render、findDOMNode、unmountComponentAtNode）
AIWWY的博客
12-06 595
目录ReactDomrenderfindDOMNodeunmountComponentAtNodereact-dom是React剥离出的涉及DOM操作的部分。render用于将React渲染的虚拟DOM渲染到浏览器DOM。注意有可选参数callback函数，当组件装载完毕时，callback 就会被调用。 findDOMNode 用于获取真正的DOM元素，以便对DOM节点进行操作。可以传入组件或ref来获取原生dom（ref加在原生dom上，获取到的就是原生dom；ref加在组件上，获取到的是组件实例
Unable to find node on an unmounted component in React
最新发布
weixin_43726152的博客
01-12 645
通过网上说的版本原因，合理推测是因为react 3.x版本对4.x写法的不兼容导致的，经过多部分排查改正，将4.x版本的函数const写法从render内移动至render之外履行this.xxx函数职责后，错误消失。小众错误一枚，网上都说需要react版本没有升级原因，因为是内部错误，控制台又无法定位到代码哪一行报错，网上又没有类似的解决方法，特此记录思路，供大家参考。
react -错误 Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function
qq_43526329的博客
01-05 3145
【代码】react -错误 Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function。
React报错
m0_56776497的博客
04-15 985
报错:uncaught typeerror: react_dom_client__webpack_imported_module_1__.render is not a function
qiankun整合react18报错记录-1
m0_60707623的博客
02-23 775
qiankun整合react子应用后无法切换不同子应用,报错 unmountComponentAtNode is not a function
react警告之react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18.
weixin_45866961的博客
10-08 3879
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more:
React 手动卸载组件 API 触发 componentWillUnmount()
wuyujin1997的博客
08-16 5902
已知componentWillUnmount()会在组件将被卸载前，被执行。 那么如何手动卸载某个组件，以(触发该方法的执行来)验证该规则？ 调用以下API即可：ReactDOM.unmountComponentAtNode(container)。 // 将组件element渲染到container中 ReactDOM.render(element, container); // 卸载container中的组件，定时 5s 后执行 setTimeout(function() { ReactDOM.un
再仔细读读react18官方文档吧 20220608
tuzi007a的博客
06-08 428
react
百度amis报unabled to find node on an unmounted component
qq_36016136的博客
01-15 679
在react项目中使用amis的部分组件时（例如：form）报了这个错误。后来发现是版本问题，我的react项目里的react和react-dom的版本都是17的，而amis目前还不兼容17版本的react，所以将react和react-dom的版本换成16就可以了。 ...
React警告： Warning: Can‘t perform a React state update on an unmounted component.
Stars_in_rain的博客
02-17 2951
React警告： Warning: Can’t perform a React state update on an unmounted component. 这是一个警告，错误原因是不能在组件销毁后设置state。 解决方法： 一、清除所有的定时器 componentDidMount(){ let timer= setInterval(()=>{ let {newsArr}=this.state
Calling appendChild() on a null node does nothing.
04-29
This error occurs when you try to append a child element to a parent element that doesn't exist or is null. To resolve this error, make sure that the parent element exists and is accessible in the current scope. You can also check if the parent element has been initialized or created before trying to append a child element to it. Here's an example of how to create a new element and append it to an existing parent element: ``` // create a new div element const newDiv = document.createElement('div'); // get the parent element by its ID const parentElement = document.getElementById('parent'); // check if the parent element exists if (parentElement) { // append the new div element to the parent element parentElement.appendChild(newDiv); } else { console.error('Parent element not found!'); } ``` In this example, we first create a new `div` element using the `createElement()` method. Then, we try to get the parent element by its ID using the `getElementById()` method. If the parent element exists, we append the new `div` element to it using the `appendChild()` method. If the parent element doesn't exist, we log an error message to the console.
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值