uni-app vue3 解构赋值报错 Right side of assignment cannot be destructured __ERROR

uni-app vue3 解构赋值报错 Right side of assignment cannot be destructured __ERROR

开发环境 版本号 项目创建方式
uniapp/App - HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Windiws10 ltsc

HBuilderX类型：正式

HBuilderX版本号：3.4.7

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：iPhone8

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：
分享复现demo插件：https://ext.dcloud.net.cn/plugin?name=json-gps  

操作步骤：

async test(param={type:"wgs84"}){  
    return new Promise(async(resolove)=>{  
        uni.getLocation({  
            ...param,  
            success:(res)=>{  
                resolove(res)  
            }  
        })   
    })   
},  
async onLoad(){   
 await this.test()  
}

预期结果：

正常执行代码

实际结果：

TypeError: Right side of assignment cannot be destructured __ERROR

bug描述： 如果不传参数，出现Right side of assignment cannot be destructured __ERROR

async test(param={type:"wgs84"}){  
    return new Promise(async(resolove)=>{  
        uni.getLocation({  
            ...param,  
            success:(res)=>{  
                resolove(res)  
            }  
        })   
    })   
},  

async onLoad(){   
await this.test()  
}

分享复现demo插件：https://ext.dcloud.net.cn/plugin?name=json-gps


更多关于uni-app vue3 解构赋值报错 Right side of assignment cannot be destructured __ERROR的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

1111

更多关于uni-app vue3 解构赋值报错 Right side of assignment cannot be destructured __ERROR的实战教程也可以访问 https://www.itying.com/category-93-b0.html


2222

未重现，发完整的测试工程，测试环境，测试步骤

iPhone8设备 15.4.1系统 测试步骤，上面代码块

你好，我也分享可以复现的插件了，麻烦你看看

回复 小小白啊: 已经说了，按你的插件，没有重现

在使用 uni-app 和 Vue 3 进行开发时，如果你在解构赋值时遇到 Right side of assignment cannot be destructured 的错误，通常是因为你尝试解构的对象或数组是 undefined 或 null，或者解构的目标不符合预期。

常见原因及解决方法

  1. 对象或数组为 undefined 或 null：

    • 如果你尝试解构一个 undefined 或 null 的对象或数组，就会抛出这个错误。
    • 解决方法：在解构之前，确保对象或数组已经正确初始化。
    const { prop1, prop2 } = someObject || {};

    或者使用可选链操作符：

    const { prop1, prop2 } = someObject?.nestedObject || {};

  2. 解构的目标不符合预期：

    • 如果你尝试解构一个非对象或非数组的值，也会导致这个错误。
    • 解决方法：确保你解构的目标是一个对象或数组。
    const [first, second] = someArray || [];

  3. 异步数据未加载完成：

    • 如果你在异步数据加载完成之前尝试解构，可能会导致解构的目标为 undefined。
    • 解决方法：在解构之前，确保数据已经加载完成。
    const { data } = await someAsyncFunction();
const { prop1, prop2 } = data || {};

  4. Vue 3 的响应式对象：

    • 在 Vue 3 中，如果你解构一个响应式对象，可能会导致解构后的值失去响应性。
    • 解决方法：使用 toRefs 来解构响应式对象。
    import { reactive, toRefs } from 'vue';

const state = reactive({
  prop1: 'value1',
  prop2: 'value2',
});

const { prop1, prop2 } = toRefs(state);

示例

假设你有一个异步函数 fetchData，它返回一个对象：

async function fetchData() {
  return {
    prop1: 'value1',
    prop2: 'value2',
  };
}

const { prop1, prop2 } = await fetchData() || {};
回到顶部