React结合Redux删除条目后应用崩溃抛undefined错误的求助

可选链语法报错的原因 #

你写的?.可选链出现非预期符号报错，本质是项目编译环境不支持这个ES2020标准特性，常见触发原因：

• Babel配置中@babel/preset-env的targets配置过低，未开启ES2020语法解析
• 低于7.8版本的Babel未手动引入@babel/plugin-proposal-optional-chaining插件
• 项目使用的TypeScript版本低于3.7，不支持可选链语法

调整上述编译配置后，你原本写的可选链逻辑是完全可以正常运行的。

兼容旧语法的替代实现 #

如果暂时不想改动构建配置，可以用兼容ES5/ES2019的写法实现同等兜底效果：

// 解构时给accounts加默认值，避免accounts本身为undefined时调用数组方法报错
const { currentAccountId, accounts = [] } = props;
// 用find替代filter取首项，匹配不到时直接返回undefined，不需要额外取下标
const matchedAccount = currentAccountId ? accounts.find(acc => acc.id === currentAccountId) : null;
const currentAccountType = matchedAccount ? matchedAccount.type : null;

这种写法不仅兼容旧环境，相比原本的filter(...) [0]逻辑执行效率更高，也不需要额外判断数组下标的存在性。

从Redux层根治同类问题 #

崩溃出现在与删除操作无直接关联的组件中，本质是Redux全局状态留存了被删除条目的关联引用（比如全局存储的currentAccountId指向了已被删除的账户），仅在单个组件加兜底很容易遗漏其他依赖点，可以从状态层做统一优化：

• 编写删除条目的reducer时，主动清理关联的孤立状态：比如删除账户时，如果全局存储的currentAccountId正好对应当前被删除的ID，直接将其置为null或默认值，从根源上避免其他组件拿失效ID查询不存在的条目
• 封装统一的带兜底逻辑的selector：使用Reselect等工具封装公共查询逻辑，比如专门封装获取当前选中账户的selector，内部实现"匹配不到对应条目就返回null"的兜底逻辑，所有组件统一从该selector取数，不需要每个组件单独写判断
• 为所有关联props加存在性兜底：不管是组件层的propTypes校验，还是状态解构时的默认值设置，都可以避免上游状态缺失时直接触发属性访问报错

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