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创建一个默认值，这意味着currentPlayerundefined是否将{}