根组件中state+effect组合导致应用崩溃问题排查

你的代码存在语法和逻辑错误，正是这些问题导致组件渲染失败，进而让子组件无法正确获取上下文值，出现state/setter为null的报错：

1. isMobile 状态初始化错误 #

window.matchMedia() 返回的是MediaQueryList 对象，不是布尔值，你需要取它的 .matches 属性来得到当前是否匹配移动端的布尔结果：

const [isMobile, setIsMobile] = useState(
  window.matchMedia("(max-width: 850px)").matches // 补充.matches获取布尔值
);

2. useEffect 语法错误与未清理监听 #

• 箭头函数存在语法错误，括号和分号位置不正确；
• 未移除事件监听，会导致内存泄漏，甚至组件卸载后触发回调引发错误。

修复后的 useEffect 代码：

useEffect(() => {
  const mediaQuery = window.matchMedia("(max-width: 850px)");
  
  // 定义统一的回调函数
  const handleMediaChange = (e) => setIsMobile(e.matches);
  
  // 添加监听
  mediaQuery.addEventListener('change', handleMediaChange);
  
  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    mediaQuery.removeEventListener('change', handleMediaChange);
  };
}, []);

错误引发子组件崩溃的原因 #

你的代码因语法错误无法正常渲染App组件，导致上下文 StepContext 和 StepSetterContext 的Provider未正确渲染，子组件通过 useContext 获取到的是上下文初始化时的默认值 null，因此会报“state名称为null”或“state设置函数为null”的错误。

修复上述问题后，isMobile 相关的state和effect就能正常工作，子组件也能正确获取上下文的state和setter。

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