React中removeChild报错：待移除节点非当前节点子节点问题

嘿，我完全懂你遇到的这个坑！这种情况大概率是组件在fetch请求完成前已经被卸载，导致React尝试更新一个已经不存在的组件状态/DOM节点，而渲染普通字符串时因为逻辑更简单没触发这个错误。下面给你几个靠谱的解决方案：

方案1：用AbortController取消未完成的请求 #

当组件卸载时，直接中断还在进行的fetch请求，从根源上避免请求完成后去更新已销毁的组件。

示例代码：

import { useEffect, useState } from 'react';

function YourWrapperComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 创建AbortController实例
    const controller = new AbortController();
    const signal = controller.signal;

    fetch('你的请求URL', { signal })
      .then(res => res.json())
      .then(responseData => {
        setData(responseData);
        setLoading(false);
      })
      .catch(err => {
        // 忽略取消请求的错误
        if (err.name !== 'AbortError') {
          console.error('请求出错:', err);
          setLoading(false);
        }
      });

    // 组件卸载时取消请求
    return () => controller.abort();
  }, []);

  if (loading) {
    // 现在可以放心渲染Font Awesome的加载图标了
    return <i className="fas fa-spinner fa-pulse"></i>;
  }

  return (
    <div>
      {/* 根据data渲染内容 */}
    </div>
  );
}

方案2：跟踪组件挂载状态，避免卸载后更新状态 #

如果不想取消请求，也可以用一个ref来记录组件是否还挂载着，只有当组件挂载时才更新状态。

示例代码：

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

function YourWrapperComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  // 用ref跟踪组件是否挂载
  const isMounted = useRef(true);

  useEffect(() => {
    fetch('你的请求URL')
      .then(res => res.json())
      .then(responseData => {
        // 先检查组件是否还挂载
        if (isMounted.current) {
          setData(responseData);
          setLoading(false);
        }
      })
      .catch(err => {
        if (isMounted.current) {
          console.error('请求出错:', err);
          setLoading(false);
        }
      });

    // 组件卸载时标记为未挂载
    return () => {
      isMounted.current = false;
    };
  }, []);

  if (loading) {
    return <i className="fas fa-spinner fa-pulse"></i>;
  }

  return (
    <div>
      {/* 渲染内容 */}
    </div>
  );
}

额外检查：确保Font Awesome正确引入 #

虽然这个可能性相对小，但也可以确认下：

• 你是否在项目中正确引入了Font Awesome的CSS文件（比如通过CDN或者npm安装后导入）
• 类名是否拼写正确（比如fas是免费图标库的前缀，有没有写成fab之类的错误）
• 也可以考虑使用官方的React组件@fortawesome/react-fontawesome，这样更符合React的渲染逻辑，减少DOM层面的问题。

这几个方案应该能解决你的问题，优先试试方案1，它是React官方推荐的处理异步请求卸载的方式哦！

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