React.js组件不渲染求助：页面缩放无组件切换效果

以下是针对你遇到的视口宽度变化时组件不切换、甚至组件完全不渲染问题的排查步骤：

1. 确认视口状态是否正确更新 #

• 在Context Provider中添加日志，打印每次resize时的宽度值，验证监听是否生效：

  useEffect(() => {
    const handleResize = () => {
      const newWidth = window.innerWidth;
      console.log('当前视口宽度:', newWidth);
      setViewportWidth(newWidth);
    };
    window.addEventListener('resize', handleResize);
    // 初始化时主动获取一次宽度
    handleResize();
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  

  缩放页面时查看控制台是否有数值变化，如果没有，检查useEffect依赖数组是否为空（确保只注册一次监听），或是否有其他代码意外移除了监听事件。
• 务必使用setState方法更新状态，禁止直接修改state变量（比如viewportWidth = window.innerWidth这种写法完全无效）。

2. 检查渲染条件逻辑 #

• 核对判断条件是否正确：确认是宽度<900px渲染mediumCompo，否则渲染ldComp，避免写反逻辑，比如：

  // 错误示例：条件写反
  {viewportWidth < 900 ? <ldComp /> : <mediumCompo />}
  

• 确保viewportWidth是数字类型：如果是字符串（比如从存储读取时未转成数字），会导致比较逻辑异常（如字符串"1000"和数字900比较时，会按字符编码判定为"1000" < 900），所以setViewportWidth必须传入数字值。

3. 验证组件本身是否可正常渲染 #

• 直接在App中单独渲染组件测试，比如：

  <h1>Hello</h1>
  <ldComp />
  

  如果仍无内容，说明组件自身存在问题：
  • 检查导出/导入匹配：组件是默认导出（export default ldComp）就用默认导入（import ldComp from './ldComp'），是命名导出就用命名导入，不匹配会导致渲染空组件。
  • 检查组件内部逻辑：查看组件是否有条件渲染返回null，或存在语法错误（查看浏览器控制台的报错信息）。

4. 确认Context的消费范围 #

• 确保使用useContext获取视口状态的代码，处于Context Provider的包裹范围内，正确结构示例：

  import { ViewportProvider } from './ViewportContext';
  
  function App() {
    return (
      <ViewportProvider>
        {/* 只有Provider内部的组件才能消费Context */}
        <h1>Hello</h1>
        {/* 你的条件渲染逻辑 */}
      </ViewportProvider>
    );
  }
  

  如果条件渲染代码在Provider外部，会一直使用Context的默认值，不会随视口变化更新。

5. 排查环境相关问题 #

• 关闭React Strict Mode测试：开发环境下Strict Mode会触发两次渲染，可能导致监听逻辑异常，可暂时移除index.js中的<React.StrictMode>标签，重新运行项目。
• 硬刷新浏览器（Ctrl+Shift+R）清除缓存，避免旧代码残留导致的问题。

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