ReactDOM卸载组件时报VM164 react_devtools_backend.js:2450 Warning: You are calling ReactDOM.unmountComponen

最新推荐文章于 2023-05-11 17:14:34 发布
最新推荐文章于 2023-05-11 17:14:34 发布
阅读量990 收藏
点赞数
分类专栏： Vue框架 文章标签： javascript react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44015417/article/details/124776311
版权

有哪位小伙伴知道报这个错是因为版本问题吗，解决了好久还没解决掉，只能来求助各位小伙伴了
在这里插入图片描述

  
	//卸载组件的回调
	function unmount(){
		ReactDOM.unmountComponentAtNode(document.getElementById('root'))
	}



    return (
        <div>
        <h1>求和为:{count}</h1>
        <button onClick={add}>点我+1</button>
        <button onClick={unmount}>卸载组件</button>
      </div>

    )
}


export default Demo3;



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/css/bootstrap.css">
<title></title>
</head>
<body>
  <div id="root">
    
  </div>
</body>
</html>
让我康康0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
react_joystick:使用Nipple.js的操纵杆的React组件
04-28
React操纵杆 这是一个用于渲染游戏杆的React组件。 它是的包装器 特性 options ：创建nipplejs游戏杆的选项 containerStyle ：包含操纵杆的div组件的样式 managerListener ：将使用manager作为参数的函数回调，以便...
React_and_three.js:结合使用three.js和React将3D模型导入ReactRedux网站
05-13
React和three.js 尝试使用three.js将Tāwhirimātea的3D模型放到我们的React和Redux网站中。 有多种方法可以将Three.js放入React。 在这里，我使用了React 3渲染器助手。 它很有效，我在网站上获得了3D立方体渲染...
react组件卸载调用的方法_面试题联盟之 React 篇
weixin_39881802的博客
11-19 475
关注入坑互联网，回复“加群”加入我们一起学习，天天进步1.什么是虚拟DOM？虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。2.React有什么特点？①它使用虚拟DOM而不是真正的DOM。②它可以用服务器端渲染。③它遵循单向数据流或数据绑定。...
React生产模式下禁止React Developer Tools、Redux DevTools
JUSTIN的博客
08-05 3372
(一) 前言 开发者工具，能方便开发人员在开发环境调试代码，但是如果在生产环境也打开，那么，无疑会让代码细节暴露，所以，我们应该在生产环境中将，react 和 redux的开发工具禁用。 (二) 禁用React Developer Tools 开发工具都会在window上挂载属性，react就是__REACT_DEVTOOLS_GLOBAL_HOOK__，那么我们的解决方案，就是当process....
Warning: You are calling ReactDOM.unmountComponentAtNode() on a container that was previously passed
qq_36164225的博客
07-21 1663
报错react_devtools_backend.js2450WarningYouarecallingReactDOM.unmountComponentAtNode()onacontainerthatwaspreviouslypassedtoReactDOMClient.createRoot().Thisisnotsupported.Didyoumeantocallroot.unmount()?render后记得。
如何解决控制台报：react_devtools_backend.js:4026 Warning: You are calling ReactDOMClient.createRoot
superprogramman的博客
08-09 1857
react_devtools_backend.js
react - antd中message提示配置无效问题
前端三脚猫的博客
09-20 4066
在react中使用antd组件的message全局提示时, 配置无效问题。
d3_react_chart_components:使用 d3.js 的 React 图表组件
06-30
图表组件使用图表组件图表类型时间序列（沿 x 轴的时间） 折线图（沿 x 轴的数字）时间序列时间序列可以沿单个时间轴渲染多个数据集，并获取形状数据： var timeseries = { series1 : [ { x : '01-May-12' , y : 1 }...
react_init:学习 React.js
07-19
学习如何使用 React js。
react_spa:使用 React.js 构建的 SPA 的简单框架
06-02
使用 React.js 构建的 SPA 的简单框架 ##如何运行： $ npm install $ bower install $ node testbackend $ gulp ＃＃去做： 修复路径 var http = require('../../utils/http'); var http = requre('http') 删除...
React18报错警告：You are calling ReactDOMClient.createRoot() on a container that has already been passed
weixin_46721670的博客
05-09 2131
React18报错警告：You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. 解决办法。
antd-admain开发常见问题记录
aijkstr
06-17 767
antd TreeSelect组件 当设置dropdownMatchSelectWidth={false}时，第二屏的标签展开时会导致标签选择框跳动，去掉这个属性就可以了，目前没找到兼容的方案
You are calling ReactDOMClient.createRoot() on a container that has already been passed
Wangcs的博客
07-10 3395
控制台问题：index.js 处理方案 调用subscribe 监控 时 不再创建就行 下一行就行 const root = ReactDOM.createRoot(document.getElementById(‘root’));
解决React卸载组件发生的问题(root.unmount())
zyq的博客
05-11 1069
Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
React随记：React常见报错及解决方案
鸡肋佐的博客
01-12 3475
React常见报错及解决方案
react devtools插件报错处理
zythy的专栏
11-02 747
React的开发者调试工具插件，安装后在Chrome中提示报错： react-refresh-runtime.development.js:465 解决方法： React项目（不是插件文件目录哦）目录下，找到\node_modules\@pmmmwh\react-refresh-webpack-plugin\client目录下的 ReactRefreshEntry.js文件，将此行注释掉即可： //RefreshRuntime.injectIntoGlobalHook(safeThis);
使用createRoot()方法创建的react组件在调用ReactDOM.unmountComponentAtNode()方法卸载报错的解决方案
qq_54896312的博客
11-25 1666
使用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
ReactDom.render 源码
qq_36411712的博客
07-27 770
function render(element, container, callback) { if (!isValidContainer(container)) { { throw Error( "Target container is not a DOM element." ); } } { var isModernRoot = isContainerMarkedAsRoot(container) && container._react.
react_devtools_backend_compact.js:2367 EVIEW-UI TablePro: Table dataset should have an unique `key`, or set `rowKey` prop to get an unique key
最新发布
06-07
这个警告是因为你在使用Eview-UI的TablePro组件时，没有为每一行数据设置唯一的key属性。为了解决这个问题，你可以在TablePro组件中为每一行数据添加一个唯一的key属性，或者设置rowKey属性来获取一个唯一的key。 如果你选择为每一行数据添加一个key属性，示例代码如下： ```jsx import {TablePro} from 'eview-ui'; function App() { const data = [ { id: 1, name: 'Alice', age: 20 }, { id: 2, name: 'Bob', age: 25 }, { id: 3, name: 'Charlie', age: 30 }, ]; return ( <div> <TablePro data={data} columns={[ { title: 'ID', dataIndex: 'id' }, { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, ]} rowKey="id" /> </div> ); } export default App; ``` 在上面的代码中，我们为每个数据项添加了一个id属性，并将rowKey属性设置为"id"，以确保每个数据项都有一个唯一的key。这样，你就不会再收到这个警告了。 如果你想使用其他字段作为唯一的key，只需要将rowKey属性设置为对应的字段名即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值