收藏
回答

setData跟新数组的某一项,页面渲染成功了,但是数组没有更新?

我定义一个指定长度的空数组displayImgData,页面使用wx:for="{{displayImgData}}"渲染。从后台请求数据,如果请求到的图片是第一张,就把这个图片放到页面的第一个位置,以此类推。代码如下:

that.data.displayImgData.find((item, index) => {

if ((index + 1) == res.data.data.currentNumber) {

that.setData({

['displayImgData[' + index + '].src']: res.data.data.file,

['displayImgData[' + index + '].number']: res.data.data.currentNumber,

})

}

})

console.log('displayImgData===', that.data.displayImgData)

结果是页面显示正常,但是打印出来的displayImgData只有最后取得的图片有值,其余都是空的,截图如下:

这是什么原因?

回答关注问题邀请回答
收藏

2 个回答

  • 2020-08-06

    是我搞错了,打印出来不是空数组。但是也有问题,当图片全部已经渲染到页面后,打印数组后发现,数组中的每一项都是最后一个图片的信息。


    2020-08-06
    有用
    回复
  • Cjiang
    Cjiang
    2020-08-06

    你好,可以参考下

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find

    是不是数据处理错了?麻烦再核实下。

    2020-08-06
    有用
    回复 3
    • 2020-08-06
      是我搞错了,打印出来不是空数组。但是也有问题,当图片全部已经渲染到页面后,打印数组后发现,数组中的每一项都是最后一个图片的信息。
      2020-08-06
      回复
    • Cjiang
      Cjiang
      2020-08-06回复
      后台请求数据是什么呢?需要怎么处理?可以用数组的方法进行处理数据再渲染。
      2020-08-06
      回复
    • 2020-08-10
      后台请求的数据是base64编码的图片,每次只返回一张,小程序端每隔一秒发一次请求,总共发60次。
      处理:当第一次取到图片总数的时候,会创建一个长度为图片总数的数组,用来存放图片并渲染到页面,当取到第二张图片的时候,就在页面把数组中第二个位置的图片渲染上去,依次类推。
      问题是:页面渲染没有问题,图片是按照位置渲染上去了,但是在打印页面上用来渲染的数组的时候,发现数组中的每一项都是最后一个请求到的图片的信息,这是为什么?
      2020-08-10
      回复
登录 后发表内容
问题标签