React项目报错Uncaught TypeError: ReactDOM is undefined，求解决方案

直接报错原因：ReactDOM导入与使用错误 #

在React 18中，react-dom/client导出的是createRoot方法，而非完整的ReactDOM对象。你当前的导入语句import ReactDOM from 'react-dom/client'会导致ReactDOM变量为undefined，自然无法调用ReactDOM.render。

但更核心的问题是：你错误地使用了ReactDOM.render在组件内部直接操作DOM，这完全违背了React的状态驱动UI设计理念。React的核心是通过状态变化自动更新UI，而非手动调用渲染方法插入元素。

完整修复方案 #

我们需要重构代码，用状态管理任务列表，让React自动处理UI更新：

1. 修改AddTasks组件（管理任务列表与输入状态） #

将单个任务的状态改为任务数组，并添加输入框的受控状态：

import { useState } from "react"
import ShowOrDelete from "../ShowOrDelete"
import React from 'react'

const AddTasks = () =>{
    // 用数组存储所有任务
    const [tasks, setTasks] = useState([])
    // 管理输入框的受控状态
    const [inputValue, setInputValue] = useState('')
    const placeHolderText = "Escribe algo aqui"

    // 添加任务的逻辑
    const addTask = () => {
        if (inputValue.trim()) {
            // 追加新任务到数组
            setTasks(prevTasks => [...prevTasks, inputValue])
            // 清空输入框
            setInputValue('')
        }
    }

    return(
        <div className="bg-slate-200 p-8 mt-36 m-auto w-1/2 h-96 rounded-lg text-2xl text-center" id="task-container">
            <h2 className="mb-8"><strong>Mis Tareas</strong></h2> 
            <div>
                <input 
                    className="h-10" 
                    type="text" 
                    name="tasks" 
                    id="input-value" 
                    placeholder={placeHolderText}
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                />
                <ShowOrDelete addTask={addTask}/>
            </div>
            {/* 渲染所有任务 */}
            <div className="mt-4">
                {tasks.map((task, index) => (
                    <div key={index} className="bg-slate-950 text-white text-xl p-2 mb-2">
                        <p>{task}</p>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default AddTasks

2. 修改ShowOrDelete组件（仅负责触发添加操作） #

移除所有ReactDOM相关代码，只保留按钮的点击逻辑：

import React from 'react'

const ShowOrDelete = ({ addTask }) =>{
    return(
        <div className="inline">
            <button onClick={addTask} className="bg-green-500 text-white text-xl p-2">Agregar Tareas</button>
        </div>
    )
}

export default ShowOrDelete

关键改进点 #

• 用受控组件管理输入框的值，避免直接操作DOM获取输入内容
• 用数组状态存储所有任务，通过map方法自动渲染任务列表
• 移除了错误的ReactDOM.render调用，让React通过状态变化自动更新UI
• 逻辑更清晰：父组件管理状态与核心逻辑，子组件负责UI交互触发

内容的提问来源于stack exchange，提问作者Joaquín Ruiz