React下拉菜单报错求助：Cannot read properties of null (reading 'filter')

问题概述 #

• 开发小型React下拉菜单组件，Chrome中运行正常，但IE浏览器报错，线上部署后也无法正常运行
• 核心错误：Cannot read properties of null (reading 'filter')，多次调试未解决

错误信息补充 #

编译器代码片段：涉及对目标变量调用filter方法的逻辑
浏览器控制台：明确报错Cannot read properties of null (reading 'filter')，指向调用filter的代码行

排查与修复方案 #

1. 空值校验缺失 #

IE对空值的容错性远低于Chrome，大概率是调用filter的变量在IE/线上环境中变为null。直接给变量加兜底判断：

// 替换原有的data.filter(...)写法
(data || []).filter(item => /* 过滤逻辑 */)

2. 组件状态初始化错误 #

检查React组件的状态初始化，确保需要过滤的数组状态初始值是[]而非null：

// 正确初始化
const [menuOptions, setMenuOptions] = useState([]);

3. ES6+语法兼容问题 #

IE不支持部分ES6+特性，若项目未配置完整的转译，可能导致变量赋值异常：

• 确认package.json的browserslist包含IE版本：

  "browserslist": [
    "IE 11",
    "> 1%",
    "last 2 versions"
  ]
  

• 安装并引入@babel/polyfill，确保所有数组方法、语法能被IE识别

4. 线上环境数据异常 #

线上服务器可能存在接口返回失败、跨域问题，导致组件获取的数据源为空：

• 检查线上接口返回格式，确保失败时返回默认空数组
• 排查网络请求是否存在跨域、资源加载顺序错误

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