时间戳

首页 > 解决方案 > 当组件中有解构赋值时，为什么默认道具不能防止 TypeError？

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

问题描述

我有一个组件接受一个道具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 工作方式的信息？即使我有默认道具，我是否必须围绕解构赋值表达式编写更多防御性代码？

标签： reactjsreact-redux

解决方案

您使用defaultProps正确，但我怀疑它a以某种方式设置为null而不是undefined. defaultProps仅在值为 时替换道具undefined，因此如果某些情况a设置为null，则不会出现默认道具，这会导致您的错误。

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

参考：React.js - 默认 prop 不与 `null` 一起使用

推荐阅读