React组件卸载校验导致产品列表无法渲染的问题排查

问题根源：React StrictMode的开发环境行为 #

你遇到的问题是React开发环境下StrictMode的特殊检测逻辑导致的：

在React 18的StrictMode中，为帮助开发者发现副作用潜在问题，开发环境会刻意模拟组件的「挂载-卸载-重新挂载」流程。对应你的代码：

• 首次挂载：isMounted.current初始化为true，fetchData发起请求。
• React立刻模拟卸载：执行useEffect的清理函数，把isMounted.current设为false。
• 模拟重新挂载：再次执行useEffect的fetchData，但useRef是组件实例持久化对象，current值仍保留false。
• 请求完成后，if (isMounted.current)判断不通过，跳过setProducts，导致UI无法渲染列表。

注释掉清理函数的isMounted.current = false后，current值一直为true，第二次请求完成后setProducts正常执行，UI就能展示内容。

修复方案 #

需要在useEffect内部每次挂载时重置isMounted.current为true，确保重新挂载时状态正确：

修改后的App.jsx中useEffect部分：

useEffect(() => {
  isMounted.current = true; // 每次挂载时重置状态
  fetchData();
  return () => {
    isMounted.current = false;
  };
}, []);

补充说明 #

• 这种重复挂载的行为仅存在于开发环境，生产环境不会触发，所以生产环境中原代码可能不会出现问题，但开发环境会异常。
• 使用useRef跟踪挂载状态的核心原则是：挂载时设为true，卸载时设为false，避免重复挂载时的状态污染。

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