React中为什么要将cart props的默认值设置为空数组？

为什么你当前没有遇到报错 #

你目前的代码全链路都保证了cart永远是数组类型：

• Redux初始化时initialState就给cart字段赋值了本地的对象数组
• 现有reducer逻辑中，只有清空操作会把cart设为空数组，其余场景都返回原state的cart
• mapStateToProps直接透传store里的cart，没有额外修改逻辑
  所以CartContainer拿到的cart永远不会是undefined或者null，删掉默认值自然不会触发报错。

会触发报错的常见场景 #

只要出现cart值为undefined/null的情况，就会立即报错，典型场景包括：

• Redux的initialState漏写cart字段，导致store中cart默认是undefined
• 后续新增reducer逻辑时，不小心把cart赋值为null，比如删除商品的逻辑写错直接返回{...state, cart: null}
• 后续把CartContainer改成通用组件脱离Redux使用，父组件调用时忘记传cart属性
• 接口请求获取购物车数据的场景下，接口返回异常把cart设为null

报错的底层原因 #

这是JavaScript的基础语法规则：

1. ES6对象解构时，如果对应的属性不存在/值为undefined，解构出来的变量默认值就是undefined，你如果没有写cart=[]的兜底默认值，cart就有可能是undefined
2. undefined和null属于原始类型，没有任何属性和方法，访问undefined.length或者调用undefined.map()都会直接抛出TypeError: Cannot read properties of undefined (reading 'length')类型错误，直接导致组件渲染失败、页面白屏。

教程里要求加默认值属于防御性编程的最佳实践，相当于给组件加了一层兜底保护，不管上层传值是否符合预期，组件自身都能保证cart是数组类型，不会因为上层的疏漏直接崩溃。

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