微信小程序setData数组异步问题使用回调解决

最近在写微信小程序,使用腾讯的地图api搜索附近的医院位置信息,并在微信小程序的地图上用图标显示出来。

但是,我search得到的数组,在setData()的时候竟然set不了,再打印出来还是空的,最后,通过回调函数得到了解决。

我写了一个函数来获得markers的数组,然后,再将数组写到data中

代码截图和说明如下:

函数调用的时候:


在函数定义的时候:


              

我这里是为了避免代码冗余,把得到数组的函数写在了外部的一个js文件中,如果不想这样做,只要去掉require(...)和module(.....)这两句即可。


### 实现微信小程序使用 JavaScript 拼接数组微信小程序中,JavaScript 是主要的逻辑处理语言之一。可以通过多种方法来实现数组的拼接功能。以下是几种常见的数组拼接方式及其具体示例。 #### 方法一:使用 `concat` 方法 `Array.prototype.concat()` 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。 ```javascript // 示例代码 Page({ data: { array1: ['苹果', '香蕉'], array2: ['橙子', '葡萄'] }, onLoad() { const newArray = this.data.array1.concat(this.data.array2); console.log(newArray); // 输出 ["苹果", "香蕉", "橙子", "葡萄"] this.setData({ resultArray: newArray }); } }); ``` 这种方法适用于简单的数组拼接场景[^1]。 --- #### 方法二:使用扩展运算符 (`...`) ES6 中引入了扩展运算符(`...`),可以轻松地将一个数组的内容展开并与其他数组组合在一起。 ```javascript // 示例代码 Page({ data: { array1: ['红色', '蓝色'], array2: ['绿色', '黄色'] }, onLoad() { const newArray = [...this.data.array1, ...this.data.array2]; console.log(newArray); // 输出 ["红色", "蓝色", "绿色", "黄色"] this.setData({ resultArray: newArray }); } }); ``` 这种方式更加简洁直观,适合现代开发环境下的需求[^3]。 --- #### 方法三:使用循环手动拼接 如果需要更灵活的操作或者对性能有较高要求,则可以选择通过遍历数组的方式手动完成拼接。 ```javascript // 示例代码 Page({ data: { array1: [1, 2], array2: [3, 4] }, onLoad() { let newArray = []; for (let item of this.data.array1) { newArray.push(item); } for (let item of this.data.array2) { newArray.push(item); } console.log(newArray); // 输出 [1, 2, 3, 4] this.setData({ resultArray: newArray }); } }); ``` 这种做法虽然较为繁琐,但在某些特殊情况下可能更为适用[^3]。 --- #### 注意事项 - 如果涉及复杂的数据结构(如嵌套对象或深层拷贝),建议结合深拷贝技术以避免意外修改原始数据。 - 使用 `setData` 更新视图时需注意异步特性,必要时可通过回调函数确保更新顺序正确。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值