解决React卸载组件发生的问题(root.unmount())

 前言

报错内容：

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（）的容器调用ReactDOMClient.createRoot如果您想更新现有的根，请对其调用root.render（）。然而，错上加错。

补充：

1. 在React18中，创建根节点用createRoot

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById("root"))

2. 删除节点 unmountComponentAtNode()，在React18中被root.unmount()所取代。

原先的代码

import React, { useState, useEffect } from "react"
import "./index.css"

import { createRoot } from "react-dom/client"
export default function Hook() {
 
  const [count, setCount] = useState(0)
  const [name, setName] = useState("tom")

  useEffect(() => {
    let timer = setInterval(() => {
      setCount((count) => count + 1)
    }, 1000)

    return () => {
      clearInterval(timer)
    }
  }, [])
  function add() {
    setCount(count + 1)
    // setCount((count) => count + 1)
  }
  function changeName() {
    setName("丽丽")
  }
  function unmount() {
    const root = createRoot(document.getElementById("root"))
    root.unmount()
  }
  return (
    <div>
      <h2>setState的两种写法</h2>
      <h3>我的名字是：{name}</h3>
      <p>{count}</p>
      <button onClick={add}>+1</button>
      <button onClick={changeName}>换名字</button>
      <button onClick={unmount}>卸载</button>
    </div>
  )
}

解决办法

1.  暴露入口文件的root

export const root = createRoot(document.getElementById("root"))

2.  组件文件中调用及使用 root.unmount()删除即可

import { root } from "../../index"

function unmount() {
  root.unmount()
}