微信小程序字段渲染失败解决方法

最新推荐文章于 2023-06-08 22:58:21 发布

显卡报废

最新推荐文章于 2023-06-08 22:58:21 发布

阅读量456

点赞数

文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/weixin_45907293/article/details/130617040

版权

文章讲述了在处理小程序数据时遇到的问题，即由于异步请求的特性，数据未完全获取到就尝试渲染，导致字段缺失。通过使用Promise.all()来等待所有异步请求完成，确保数据完整后再进行页面渲染，从而解决了问题。

摘要由CSDN通过智能技术生成

创建了一个临时字段 issign ，需要依靠这个字段来决定按钮的可用状态，但是渲染的时候， console 可以打印出完整的带有 issign 字段的列表数据，但是查看 AppData 却缺少这一字段导致渲染失败。

原代码：

  getAllData() {
    request({
      url: "/activity/all"
    }).then(res => {
      if (res.code === "0") {
        var tempData = this.getBtnStatus(res.data)
        console.log(tempData)
        this.setData({
          activityList: tempData,
        })
      }
    })
  },

  getBtnStatus(data) {
    // console.log('data', data)
    let newData = JSON.parse(JSON.stringify(data))
    data.map((value, index) => {
      // console.log(index, value)
      const userid = wx.getStorageSync('userID')
      const activityid = value.id
      request({
        url: "/activity/issign/" + activityid + "/" + userid
      }).then(res => {
        if (res.code === "0") {
          Object.assign(newData[index], {
            issign: res.data
          })
        }
      })
    })
    // console.log('newData', newData)
    return newData
  },

我在 getBtnStatus() 方法中进行了异步请求来获取 issign 数据，然后将其合并到 newData 中。但由于异步请求的特性，代码在进行异步请求时会继续往下执行，而不会等待异步请求的结果返回。因此，在返回 newData 之前，异步请求可能还未完成，导致 newData 中的 issign 字段为空。

修改后的可行代码：

getAllData() {
  request({
    url: "/activity/all"
  }).then(res => {
    if (res.code === "0") {
      var tempData;
      console.log(tempData);
      Promise.all(tempData.map(item => {
        return new Promise(resolve => {
          const userid = wx.getStorageSync('userID');
          const activityid = item.id;
          request({
            url: "/activity/issign/" + activityid + "/" + userid
          }).then(res => {
            if (res.code === "0") {
              Object.assign(item, {
                issign: res.data
              });
            }
            resolve(); // 标记异步请求完成
          });
        });
      })).then(() => {
        this.setData({
          activityList: tempData
        });
      });
    }
  });
},

在修改后的代码中，我们使用了 Promise.all() 方法来等待所有异步请求完成。首先，使用 tempData.map() 方法创建一个包含所有异步请求的 Promise 数组。然后，通过 Promise.all() 等待所有 Promise 完成，并在所有异步请求都完成后，执行 then() 方法中的回调函数，将更新后的 tempData 赋值给 activityList 字段进行页面渲染。

为了让 Promise.all() 正确工作，我们需要在每个异步请求完成后调用 resolve() 方法来标记异步请求的完成。这样 Promise.all() 才能等待所有异步请求完成后再执行回调函数。

这样就可以确保在所有异步请求完成后，再将更新后的 tempData 赋值给 activityList 字段，并进行页面渲染。