React中使用useRef删除子元素时报removeChild不是函数如何解决

该报错的核心是myRef.current当前不是原生DOM元素，因此不存在removeChild这个DOM API方法，常见原因和对应解决方法如下：

常见触发原因 #

• 原因1：ref未正确绑定到原生DOM元素
  如果你的ref属性挂载到了React自定义组件上（而非<div>/<form>这类原生HTML标签），且该组件没有做ref转发处理，myRef.current拿到的会是组件实例而非DOM元素；也有可能是你在JSX中漏写了ref={myRef}绑定逻辑。
• 原因2：调用postData的时机过早
  React组件挂载完成前myRef.current的值为null，如果在组件渲染阶段、或者useEffect依赖为空数组的执行时机之前调用postData，就会出现取值错误。
• 原因3：参数传值错误
  如果调用postData时你传入的不是useRef返回的ref对象，而是直接传入了myRef.current，那么在函数内部再访问myRef.current就会变成读取DOM元素上不存在的current属性，最终得到undefined。

修复方案 #

临时修复（直接操作DOM场景） #

先在操作前增加合法性判断，避免调用不存在的方法：

export const postData = (
  myRef,
  token,
  id1,
  id2,
) => {
  // 先加判断，确认current是原生DOM元素再操作
  if (!myRef?.current instanceof HTMLElement) return
  myRef.current.children[0].value = token;
  myRef.current.children[1].value = id1;
  myRef.current.children[2].value = id2;

  [...myRef.current.children].forEach((child) => {
    if (!child.value) {
      myRef.current.removeChild(child);
    }
  });
};

同时确认调用postData的时机是在组件挂载完成之后（比如绑定到按钮点击事件、或者放在useEffect(() => { /* 这里调用 */ }, [])中），且JSX中的原生标签已经正确绑定了ref={myRef}。

推荐方案（符合React设计规范） #

React不建议直接操作真实DOM，会导致虚拟DOM和真实DOM不一致引发渲染异常。你可以通过状态管理子元素的渲染逻辑：把需要渲染的子元素列表存在useState中，需要删除对应元素时直接修改状态即可，无需操作ref。

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