如何用ES6解构React状态中的嵌套对象以获取内部属性

嗨，这事儿用ES6的嵌套对象解构就能轻松搞定！你的状态结构里，organizations藏在userOrganizations下面，users藏在OrganizationUsers下面，咱们只需要一层一层解构就行：

const { userOrganizations: { organizations }, OrganizationUsers: { users } } = this.state;

简单解释下这个语法： #

• 先从this.state里取出userOrganizations和OrganizationUsers这两个顶层对象
• 然后用:语法，把userOrganizations内部的organizations提取出来，直接赋值给变量organizations
• 同理，把OrganizationUsers内部的users提取出来赋值给变量users

额外提示：避免解构不存在的属性报错 #

如果担心userOrganizations或者OrganizationUsers本身可能是undefined（比如初始状态没设置好），可以给它们加个默认空对象，防止解构时报错：

const { 
  userOrganizations: { organizations = {} } = {}, 
  OrganizationUsers: { users = {} } = {} 
} = this.state;

这样就算某个顶层对象不存在，也会用默认的空对象代替，内部的属性也会有默认空对象兜底，代码更健壮～

内容的提问来源于stack exchange，提问作者Imesh Chandrasiri