避免在事件之前在 getDefaultProps 中声明大对象答案

【问题标题】：Avoid declaring large object in getDefaultProps prior to an event避免在事件之前在 getDefaultProps 中声明大对象
【发布时间】：2016-06-04 05:17:44
【问题描述】：

标题可能不是描述问题的最佳方式，但我想知道在getDefaultProps 中声明对象是否有更好的做法？

在我的render 方法中，我从一个道具/状态中调用几个键，这些键在点击事件上得到更新，即this.props.player.name。问题是页面加载时this.props.player 是空白的并且调用.name 会出错。我知道我可以做类似...

getDefaultProps: function() { return { player: { name: null, team: null position: null } }; }

但感觉不对。我希望可能会有类似于 Ruby 的 .try() 的方式，它不会尝试在未定义的 prop 上调用方法。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

问题具体是this.props.player 是undefined，如果你定义一个空对象，它将防止错误发生。将您预期的键存根并不是一个坏习惯，但是将默认值设置为 {} 就足以防止它抛出。

【讨论】：

但是获取 this.props.player.name 会完全抛出“未捕获的类型错误：无法读取未定义的属性 'name'”，不是吗？
@MichaelRasoahaingo 我也这么认为，但它确实适用于下一层。因此，当我声明 player: {} 时，返回时没有错误 this.props.player.name 但类似 this.props.player.first_name 的错误输出。
是的，它正在抛出，因为您试图引用 undefined 上的属性。如果它是一个对象，尝试获取对象不存在的属性只是undefined。

【解决方案2】：

您可以从 ImmutableJS 创建数据。然后您可以像这样获取数据的任何部分：

this.state.getIn(['player', 'name', ...])

或

this.state.get('player')

即使玩家未定义或其他，这也不会抛出错误，它会返回未定义（或空）我不记得了

update 和 updateIn 工作相同

参见文档here

【讨论】：

如果他肯定已经在使用 ImmutableJS，但这将是添加 ImmutableJS 的一个不好的理由。
Immutable 或其他库是所有反应良好实践的一部分，为什么不开始使用它？
用它来解决这个问题是大材小用。添加一个您不理解的依赖项，因为它碰巧用更简单的解决方案解决了一个琐碎的问题，这不是一个好习惯。
它看起来是一个不错的库，我可能会在某个时候添加它，但我同意 Carl 的观点，因为它对于这个特定问题来说有点矫枉过正。不过感谢您的提示。
当您尝试优化时这很好，如果您可以保证您的对象是不可变的，那么实现shouldComponentUpdate 会变得更加容易。我个人不使用它，因为只需在纯 Javascript 中使用良好实践即可获得相同的保证。

【解决方案3】：

我也想添加这个香草 JS 解决方案 - var x = (user || {}).name;

Source

【讨论】：