在控制台中收到警告"您正在之前已传递给 createRoot() 的容器上调用 ReactDOMClient.createRoot()。

Question

我正在尝试在使用最新版本(React 18)的简单React应用程序中实现Redux。以下是我到目前为止在index.js中的代码:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { store, App } from './App';
import { createStore } from 'redux'
export const renderApp = () => {
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
}
renderApp()
store.subscribe(renderApp)

然而，我在控制台中得到一个警告说:

"你正在一个容器上调用ReactDOMClient.createRoot()之前已经传递给createRoot()。相反,叫如果您想要更新它，则在现有根上使用root.render() ">

应该是什么意思，我需要如何改变我的代码在index.js?

Answer 1

最基本的实现如下所示，它创建一个根，对其进行渲染，然后传递一个回调，该回调关闭该根以进行进一步的订阅调用。

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