You are calling ReactDOMClient.createRoot() on a container that has already been passed

风一般的美侣

已于 2022-07-11 11:30:58 修改

阅读量3.5k

点赞数 5

分类专栏： react js 笔记文章标签： javascript 前端 react.js

于 2022-07-10 23:50:07 首次发布

本文链接：https://blog.youkuaiyun.com/cupidTwoyin/article/details/125713118

版权

react 同时被 3 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

笔记

1 篇文章

订阅专栏

这篇博客讨论了在React应用中遇到的一个警告：不应当在已存在根元素上再次调用ReactDOM.createRoot()。解决方法是，在使用store.subscribe监听状态变化时，避免重新创建根元素，而是直接调用root.render()更新已存在的根。这涉及到React的渲染管理和版本差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

控制台问题：

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.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from "./redux/store";


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

//  检测redux 状态 发生变化 整个app 都调用 render()  作用是不用重复写 componentDidMount
store.subscribe(  () => {
    //不再创建 调用 createRoot 控制台就不报错了 程序正常运行 控制台输出也 ok  老师的旧版本可以 新版本就不行了
     // const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>
    );
 })
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

处理方案:根本原因版本跟老师的不同，处理方法也不同
调用subscribe 监控时不再创建虚拟dom就行
// const root = ReactDOM.createRoot(document.getElementById(‘root’));