当组件中有解构赋值时，为啥默认道具不能防止 TypeError？

Posted 2023-02-23

【中文标题】当组件中有解构赋值时，为啥默认道具不能防止 TypeError？

【英文标题】：Why do default props not protect against a TypeError when there is a destructuring assignment in a component?当组件中有解构赋值时，为什么默认道具不能防止 TypeError？

【发布时间】：2020-01-11 15:32:27

【问题描述】：

我有一个组件接受一个 prop a，它是一个具有 b 属性的对象：

const MyComponent = ( a:  b  ) => b;

MyComponent.defaultProps = 
  a: 
    b: 4,
  ,
;

这个组件连接到一个 Redux 存储：

export default connect(state => ( a: state.a ))(MyComponent)

而且商店似乎很好地防止了类型错误：

const INITIAL_STATE =  a:  b: 0  ;

const reducer = (state = INITIAL_STATE, action) => 
  switch (action.type) 
    // none of the branches of the switch statement removes state.a.b or reassigns state.a to something other than an object
    default: return state;
  
;

有时，非常罕见，在不到 1000 个请求中，我会看到相应的

TypeError: 无法读取未定义的属性“b”

记录在异常监控系统中。似乎与用户的浏览器版本没有关联。 React 的最新稳定版本始终在生产环境中运行。其他周围的代码不太可能导致这种行为。

我的问题是，我是否遗漏了一些关于默认道具或 Redux 工作方式的信息？即使我有默认道具，我是否必须围绕解构赋值表达式编写更多防御性代码？

【问题讨论】：

为什么一个组件只返回一个数字而不是 JSX？

@John Ruddell 这无关紧要。执行没有到达那个点，它在函数返回之前发生的解构赋值失败。

我明白，我只是在询问组件，因为这不正确。我不会依赖默认道具，而只是确保您使用正确的道具渲染组件。如果您想创建一个复制问题的代码框，您提供的代码看起来不错。没有看到设置很难分辨。

【参考方案1】：

您正确使用了defaultProps，但我怀疑a 被设置为null 而不是undefined。 defaultProps 仅在值为undefined 时替换props，所以如果有a 设置为null 的情况，默认的props 将不会出现，这会导致您的错误。

从您的示例中，无法判断将其设置为 null 的位置，但您可以使用该位置开始搜索。我会开始查看执行分配的 redux reducer，因为它可能是一个意外返回 null 的端点，或者类似的东西。

参考：React.js - default prop is not used with `null` is passed