React18报错警告:You are calling ReactDOMClient.createRoot() on a container that has already been passed
React18报错警告:You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. 解决办法
React18报错警告
react_devtools_backend_compact.js:2367 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 ,为什么,解决办法是什么?
这个警告是因为在相同的容器上多次调用createRoot()
方法。这通常发生在React应用程序中在多个地方使用createRoot()
创建多个根渲染器时。在这种情况下,当我们尝试在同一个容器上调用createRoot()
方法时,React会发出上述警告。
解决办法
解决办法是,在第一次调用createRoot()
方法创建根渲染器后,在其他位置不要再次使用createRoot()
方法。而是应该使用已经存在的根渲染器来更新它,可以使用root.render()
方法更新已经存在的根渲染器。
- 如果你确实需要再次创建根渲染器,则应该使用不同的容器来避免这个问题。
- 如果不需要多个根渲染器,需要判断是否已经通过
createRoot()
方法创建了根渲染器,通过判断ReactDOMRoot这个对象中是否存在**_internalRoo**
当你想在一个容器上多次调用createRoot()
方法时,就会出现这个警告。以下是一个例子:
import {createRoot} from 'react-dom/client;const container = document.getElementById('app');// 第一次调用 createRoot()
const root1 = createRoot(container);
root1.render(<App />);// 第二次调用 createRoot(),会导致警告
const root2 = createRoot(container);
root2.render(<AnotherComponent />);
在这个例子中,我们在同一个容器上创建了两个根渲染器(root):root1和root2。第二次调用createRoot()
方法时,React就会发出上述警告。
为了避免这个问题,我们应该避免在相同的容器上多次调用createRoot()
方法。如果我们确实需要创建多个根渲染器,应该使用不同的容器或在不同的组件中进行渲染。以下是一个解决方法:
import {createRoot} from 'react-dom/client;const container1 = document.getElementById('app1');
const container2 = document.getElementById('app2');// 在不同的容器上创建根渲染器
const root1 = createRoot(container1);
root1.render(<App1 />);const root2 = createRoot(container2);
root2.render(<App2 />);
在这个例子中,我们在两个不同的容器上创建了两个根渲染器(root):root1和root2),避免了在同一个容器上多次调用createRoot()
方法,从而避免了上述警告。
let root = nullexport default function confirm(config: ModalFuncProps) {let div = document.getElementById('confirm-container');if (!div) {div = document.createElement('div');div.id = 'confirm-container';document.body.appendChild(div);}if (!root?._internalRoot) root = createRoot(div)root.render(<app/>)}
React18报错警告:You are calling ReactDOMClient.createRoot() on a container that has already been passed相关推荐
- Matlab报错警告: 启动 Connector 时出现问题及解决方案
报错 警告: 启动 Connector 时出现问题.请确认端口 31415 可用.Did not start the server. Desired port was: 31415. Last err ...
- 【JDBC】使用c3p0数据库连接池的各种报错警告
使用c3p0数据库连接池的各种报错警告 使用c3p0数据库连接池的时候,先导入了三个jar包在lib 文件夹中, c3p0-0.9.5.2.jar mchange-commons-java-0.2.3 ...
- C语言报错警告合集(转)
C常见错误 附录1 常见错误中英文对照表 fatal error C1003: error count exceeds number; stopping compilation 中文对照:(编译错误) ...
- 【C3P0】解决使用c3p0数据库连接池的各种报错警告: Having failed to acquire a resource, com.mchange.v2.resourcepool
运行环境 工具: IntelliJ IDEA java version "1.8.0_261" MySQL"5.7.19" 在使用IDEA连接c3p0数据库时, ...
- 报错警告FilterDispatcher is deprecated! Please use the new filters!
今天在联系用 jsp + struts2 + jdbc框架进行登录界面开发时,遇到的报错. 1.没有截图,大概是说can not read the path 巴拉巴拉..原因是路径中出现中文. 2.运 ...
- 解决numba报错警告:No implementation of function Function found for signature
在跑kcf的时候报错No implementation of function Function found for signature 将 alfa = np.zeros((height, widt ...
- 达梦数据库报错“[警告]Error Code:-70037,字符串不完整”
[问题描述]: 使用管理工具或dexp导出数据的时候报"[警告]Error Code:-70037,字符串不完整",导致表的数据没有导出或者导出的数据不完整.如下图所示: [问题解 ...
- iOS 7.1 arm64 编辑报错 警告解决办法
昨天把我的4S更新到iOS7.1,今天发下需要更新Xcode到5.1,发现打包项目Archive的时候,多了一堆警告和错误,很是郁闷. 郁闷没有用,作为一个合格的程序员,要学会淡定!看看警告和错误的大 ...
- docker报错:OCI runtime create failed...process_linux.go:449: container init caused “write /proc/self/
问题现象: 解决办法: 这是selinux未关闭所致.关闭即可. 参考链接: https://blog.csdn.net/sshh_zhu/article/details/111201826
最新文章
- 2019年9月2日开学!寒假时间也定了……
- np.nan is an invalid document, expected byte or unicode string
- 居民信息管理系统java_基于jsp的社区住户信息管理系统-JavaEE实现社区住户信息管理系统 - java项目源码...
- SpringBoot+Vue实现请求后台获取Base64编码的图片验证码并使用Redis缓存实现2分钟内有效
- ubuntu14.04管理员密码忘记的解决方法
- DVWA--Command Injection(命令执行)--四个等级
- Introduction-to-React-JS
- springcloud-知识点总结(三):Hystrix Dashboard turbine Zuul SpringCloud Config
- 目前全球最主流的四种Android架构简介与理解
- ArcGIS 拓扑验证与编辑共享要素
- 分享图片至Facebook与Twitter
- PHP版三合一收款码_附50多款模板源码
- 汉北地(安定、三水)属国
- Java.math.BigDecimal.subtract()方法实例
- excel自动翻译-excel一键自动翻译免费
- 基于Uniapp实现的在线投票App问卷调查
- st58服务器装系统,联想 Thinksystem ST58服务器介绍
- 树状数组 之 poj 3067
- 分享Python采集99个VB源码,总有一款适合您
- USB射频功率计DIY——方案
热门文章
- matlab稀疏矩阵方程,Matlab命令集——稀疏矩阵函数
- 郑清2461 我是签到题
- n%i==0在c语言作用,在C语言中,if(n%i==0,)是什么意思?n和i分别为一个数、 , c语言中 if(n%i==0) break 什么意思...
- VMware Workstation创建Windows 11 Insider Preview (Dev Channel) - Build 25179虚拟机
- 计算机网络实践之元气骑士公网异地联机(二) 两种方案可行性分析
- 5.IP地址介绍及VLSM
- python 黑屏检测
- 省常中模拟 Test2 Day2
- CSS零基础快速入门(详细教程)
- 开源项目学习系列--02.天天酷音TTKMusicplayer