React移除DOM子元素后切换personal状态触发DOMException错误求助

你直接用DOM操作删除了<li>元素，但React的虚拟DOM还保留着这个元素的引用。当切换personal状态触发重新渲染时，React尝试移除已经不在真实DOM里的节点，就会抛出removeChild错误。

React的核心是数据驱动视图，所有DOM更新应该由React通过数据变化自动处理，别手动操作DOM。按下面步骤改：

1. 删掉所有手动删除DOM的代码
   比如document.getElementById('task-item').remove()或者parentElement.removeChild(liElement)这类代码全删掉。

2. 确保删除操作只修改数据，让React自动更新视图

   • 删除任务时，先更新localStorage里的任务数据；
   • 触发组件重新获取最新数据，让React重新渲染列表。

import { useState, useMemo } from 'react';

function Tasks({ page, personal }) {
  // 用一个刷新密钥，触发useMemo重新获取最新数据
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  // 依赖refreshTrigger，每次删除后重新从localStorage取数据
  const filteredTasks = useMemo(() => {
    const allTasks = JSON.parse(localStorage.getItem('tasks')) || [];
    return allTasks.filter(task => task.isPersonal === personal);
  }, [page, personal, refreshTrigger]);

  const handleDelete = (taskId) => {
    // 更新localStorage的数据
    const allTasks = JSON.parse(localStorage.getItem('tasks')) || [];
    const updatedTasks = allTasks.filter(task => task.id !== taskId);
    localStorage.setItem('tasks', JSON.stringify(updatedTasks));
    
    // 修改刷新密钥，触发组件重新渲染
    setRefreshTrigger(prev => prev + 1);
  };

  return (
    <div>
      <ul>
        {/* 用任务id作为唯一key，让React正确识别每个列表项 */}
        {filteredTasks.map(task => (
          <li key={task.id}>
            {task.content}
            <button onClick={() => handleDelete(task.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

• 每个<li>必须加唯一的key属性（比如任务id），React靠这个识别列表项的变化，避免渲染混乱；
• 用refreshTrigger触发useMemo重新计算，保证每次删除后组件能拿到最新的localStorage数据；
• 全程不碰真实DOM，所有更新由React通过数据变化自动处理，这样虚拟DOM和真实DOM始终同步，不会出现找不到节点的错误。

内容的提问来源于stack exchange，提问作者Matthews Masia