React中对象解构至命名对象报错Uncaught ReferenceError: org is not defined 求助

嘿，我来帮你捋捋这个问题哈～你写的那行解构代码之所以报错，是因为混淆了对象解构赋值和对象字面量创建的语法，JS没法正确解析你的意图。

错误原因拆解 #

你写的代码：

const searchdata = { org, packageName, description, keywords } = this.state;

这段代码的语法逻辑有问题：JS会把它解析成先尝试把this.state解构到当前作用域的org、packageName等变量，然后把this.state整个赋值给searchdata。但问题在于，你是在const声明里这么写的，相当于没有正确声明org这些变量（const只声明了searchdata），所以JS会抛出Uncaught ReferenceError: org is not defined的错误。

正确的实现方式 #

你想要的“把原对象的指定属性提取到新的命名对象searchdata里”，其实有几种简洁的写法：

方式1：先解构到变量，再创建新对象（可读性最高）

先从this.state里解构出需要的属性变量，再用这些变量创建searchdata对象：

// 从state中解构出需要的属性
const { org, packageName, description, keywords } = this.state;
// 用解构得到的变量创建新对象
const searchdata = { org, packageName, description, keywords };

方式2：直接提取属性创建新对象（无需单独变量）

如果不需要单独使用org这些变量，也可以直接从this.state中取值构建新对象：

const searchdata = {
  org: this.state.org,
  packageName: this.state.packageName,
  description: this.state.description,
  keywords: this.state.keywords
};

方式3：紧凑的立即执行函数写法（适合追求代码简洁的场景）

这种写法可以在一行完成，但可读性稍弱，适合熟悉JS语法的场景：

const searchdata = (({ org, packageName, description, keywords }) => ({
  org,
  packageName,
  description,
  keywords
}))(this.state);

本质上，这几种写法都是帮你从this.state中提取指定属性，组装成新的searchdata对象，完全满足你的需求。

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