为什么我的控制台中会累积警告“root.render”？

Question

在React文档中，有这段代码可以更改屏幕上的日期。为什么我的控制台中会累积警告？

https://legacy.reactjs.org/docs/rendering-elements.html

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000); 

警告是

警告：render(...)：看起来根容器的 React 渲染内容在没有使用 React 的情况下被删除了。这不受支持并且会导致错误。相反，调用 root.unmount() 来清空根的容器。

Answer 1

该警告意味着 React 控制的 DOM 中的内容正在 React 之外的某处被修改/删除。你必须通过 React 管理根容器内的所有内容，否则会抛出此警告。所以可能有 JS 代码或其他东西正在改变其他地方的内容。