无法解构 null 的属性答案

【问题标题】：Cannot destructure property of null无法解构 null 的属性
【发布时间】：2019-11-20 04:24:42
【问题描述】：

我有一个组件可以从其 auth 属性中解构 user：

 const Profile = ({
     auth: {user}
 }) => {...}

问题是我在开发时，每当我保存任何更改时，Nodemon 都会不断刷新我的页面。当组件尝试挂载时，它会抛出一个错误，它无法从auth 解构user，因为此时auth 为空（直到我浏览该站点并重新登录）。

有没有一种优雅的方式来处理这个问题？我看了this article，但我不能做类似const { user } = auth || {}的事情。嗯..我的意思是，我可以，但我想从道具中解构，而不是在函数体中做const { user } = auth || {}。

【问题讨论】：

默认参数仅适用于 undefined 的值。 null 不允许应用默认参数，因此在正文中使用短路是唯一的方法。
@PatrickRoberts 解构参数与 React 完全无关，尽管在函数组件的参数中很常见。
@EmileBergeron 该问题多次引用 React 作为问题描述的一部分。即使解决方案不相关，很明显该问题被认为与 React 组件生命周期有关。我认为在这种情况下值得一个标签。
@PatrickRoberts 任何对 React 的引用都可以在问题中删除，问题出在哪里仍然很清楚。如果没有 React，它会更加清晰，因为它会分散读者对问题根源的注意力。在这种情况下，React 只是噪音，上下文无关紧要。
@EmileBergeron 我认为这个问题很清楚，如果没有上下文，它的用处就会降低。如果删除上下文，则可能会使其看起来像 XY 问题。此处的上下文消除了这种外观。

【解决方案1】：

当auth 为null 时，无法使用具有解构语法的默认参数来解析user，而不抛出TypeError。

只需解构到auth 并检查它是否真实：

const Profile = ({ auth }) => {
  const user = auth && auth.user;
  ...
}

【讨论】：