React TodoList删除按钮异常：点击删除所有任务且无法新增

问题根源 #

1. 违背React声明式编程原则：手动通过document.createElement、appendChild操作DOM，导致组件状态与实际DOM完全脱节，无法实现状态驱动UI更新。
2. 全局状态未被React追踪：全局数组taskArr不属于组件状态，组件无法感知其变化，也就不会触发重新渲染。
3. 删除逻辑完全错误：handleDel循环删除所有任务，且splice(taskDiv, 1)用DOM元素作为索引，完全不符合数组操作规则。
4. 重复创建容器：每次组件渲染都会创建新的taskContainer并追加到body，导致DOM结构混乱，后续新增任务也会出现异常。

修正后的代码 #

import React, { useState, useRef } from 'react';
import DelIcon from './assets/close-btn.png';
import './styling/home.scss';

// 组件名首字母大写（React规范）
function Home() {
  const inputRef = useRef();
  // 用useState管理任务列表，每个任务带唯一id
  const [tasks, setTasks] = useState([]);

  const handleClick = () => {
    const todo = inputRef.current.value.trim();
    if (!todo) return;
    
    // 生成唯一id（这里用时间戳简单实现，也可以用uuid库）
    const newTask = {
      id: Date.now(),
      content: todo
    };
    // 更新任务列表状态
    setTasks(prevTasks => [...prevTasks, newTask]);
    inputRef.current.value = '';
  };

  const handleDel = (taskId) => {
    // 过滤掉对应id的任务，更新状态
    setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
  };

  return (
    <div id='home-container'>
      <input type='text' ref={inputRef} maxLength={40} />
      <button onClick={handleClick}>Add</button>
      {/* 任务容器由React管理，直接渲染在组件内 */}
      <div className='task-container'>
        {/* 遍历任务列表渲染每个任务项 */}
        {tasks.map(task => (
          <div key={task.id} className='task-div'>
            <p>{task.content}</p>
            <button 
              className='delete-btn'
              onClick={() => handleDel(task.id)}
            >
              <img src={DelIcon} alt='delete-btn' />
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Home;

关键改动说明 #

• 状态管理：用useState维护任务列表，React会自动监听状态变化并更新UI。
• 声明式渲染：通过map遍历任务列表生成JSX，完全抛弃手动DOM操作，确保状态与UI同步。
• 精准删除：删除函数接收任务唯一id，通过过滤数组实现精准删除对应任务。
• 组件规范：组件名首字母大写（React要求），任务容器放在组件返回的JSX中，避免DOM结构混乱。

内容的提问来源于stack exchange，提问作者Aiden Rand