React联动下拉框动态设值时出现DOMException异常求助

出现DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node错误，通常是React更新DOM时节点匹配异常导致的，结合你的依赖下拉框场景，可按以下步骤修复：

1. 给下拉框选项设置唯一且稳定的key #

这是触发该错误最常见的原因：如果员工下拉框的<option>未设置唯一key，或使用数组索引作为key，当empList更新时，React会复用错误的DOM节点，引发移除节点的冲突。

修改员工下拉框的渲染代码：

<select name="empListCombo">
  {empList.map(employee => (
    // 用员工唯一标识（比如id）作为key，不要用数组索引
    <option key={employee.id} value={employee.id}>
      {employee.name}
    </option>
  ))}
</select>

同时部门下拉框也要遵循同样规则：

<select name="deptListCombo" onChange={handleSelect}>
  {deptList.map(dept => (
    <option key={dept.id} value={dept.id}>
      {dept.name}
    </option>
  ))}
</select>

2. 处理异步请求的竞态与组件挂载状态 #

如果快速切换部门，之前的API请求可能延迟返回，导致旧数据覆盖新数据，同时引发DOM更新冲突。可以通过标记组件是否挂载，避免在组件卸载后更新状态：

import { useState, useEffect, useRef } from 'react';

const YourComponent = () => {
  const [deptList, setDeptList] = useState([]);
  const [empList, setEmpList] = useState([]);
  // 标记组件是否处于挂载状态
  const isMounted = useRef(true);

  useEffect(() => {
    getDeptLists();
    // 组件卸载时更新标记
    return () => {
      isMounted.current = false;
    };
  }, []);

  const handleSelect = (e) => {
    if (e.target.name === 'deptListCombo') {
      getEmpList(e.target.value);
    }
  };

  const getEmpList = async (deptId) => {
    try {
      // 替换为你的API请求逻辑
      const response = await fetch(`/api/employees?deptId=${deptId}`);
      const responseData = await response.json();
      // 仅在组件挂载时更新状态
      if (isMounted.current) {
        setEmpList(responseData);
      }
    } catch (error) {
      console.error('获取员工列表失败:', error);
    }
  };

  // 组件渲染代码...
};

3. 优化下拉框的初始状态渲染 #

当empList为空时，可添加默认选项，避免下拉框出现空内容导致的DOM异常：

<select name="empListCombo">
  <option value="" disabled>请选择员工</option>
  {empList.map(employee => (
    <option key={employee.id} value={employee.id}>
      {employee.name}
    </option>
  ))}
</select>

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