ES6，JavaScript。 声明const，在销毁分配中未定义

Question

const Profile = () => (
  <Data data={CURRENT_PLAYER_DATA}>
    {({
      data: {
        currentPlayer: { playerProfile }
      }
    }) => <div>{playerProfile && playerProfile.name}</div>}
  </Data>
);

通过上面的代码，我得到了： playerProfile of undefined!

const Profile = () => (
  <Data data={CURRENT_PLAYER_DATA}>
    {({ data: { currentPlayer: { playerProfile = {} } = {} } = {} }) => (
      <div>{playerProfile && playerProfile.name}</div>
    )}
  </Data>
);

使用上面的代码，它可以工作，但是我不知道为什么。

而且我还需要避免类似的事情：

playerProfile && playerProfile.name

如何很好地理解这一流程？

Answer 1

您的currentPlayer属性undefined ，这意味着您实际上在做

var playerProfile = data.currentPlayer.playerProfile;

它将中断，因为data.currentPlayer不存在。 （ undefined ）

在第二个示例中，您将为currentPlayer创建一个默认值，这意味着currentPlayer如果undefined将为{}