Question

我在我的React应用程序的朋友中有这段代码，我需要清楚地了解这段代码的作用：

const Component = ()=> (
  <QueryFetcher>
    {({ data }) => {

      const { user: { profile = {} } = {} } = data

      return (
        <div>
          {profile.username && profile.username}
        </div>
      )
    }}
  </QueryFetcher>
)

这行是做什么用的？

const { user: { profile = {} } = {} } = data

在此功能组件中使用{}向{ user: { profile = {} } = {} }分配内容是否正确？还是在React中的有状态组件的render()钩中？

Answer 1

const { user: { profile = {} } = {} } = data基本上意味着您正在检索用户个人资料。

const表示您正在创建一个新变量

{ user: { profile } } }意味着您正在用户

中检索个人资料

= {}表示如果对象未定义，请使用空对象，这样它不会失败，因为如果用户未定义，执行user.profile会抛出错误。

= data意味着您从数据变量

中检索了此信息。

因此，此行表示从变量数据中获取用户，如果用户未定义，请使用空对象。然后，使用配置文件，如果未定义配置文件，请使用一个空对象。然后使用结果创建一个名为profile的变量。就像这样：

const user = data.user === undefined ? {} : data.user;
const profile = user.profile === undefined ? {} : user.profile;

Answer 2

这行是做什么用的？
const { user: { profile = {} } = {} } = data

基本上，它只是使用默认值链接ES6对象分解。此行的文字内容：

从“数据”中读取“用户”，如果未定义“用户”，则将{}设置为默认值
从“用户”中读取“个人资料”，如果未定义“个人资料”，则将{}设置为默认值

正确吗

主要是用于删除重复内容的简写语法。因此，而不是例如分别访问多个对象道具。

this.props.prop1, this.props.prop2, ...

您可以使用

const { prop1, prop2 } = this.props;

如果所有必要的道具都在一开始就被解构了，它还可以帮助其他读者稍后快速地理解方法中使用了哪些变量。

将React应用程序中的Javascript分配给功能组件中的{}，进行代码审查

2 个答案: