收藏
回答

this.setData更新base64数组,数据无法更新到页面

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug this.setData 微信安卓客户端 6.5.3 2.22.0

初始状态image数组中有一个base64数据,页面图片也显示出来了

选择了两张图片准备转换为base64数据,点击上传后使用了setData,image成了空数组,页面也没有显示

刷新appdata image数组数据更新又成功了



submit(){

    console.log('file',this.data.files)

    let image=[]

    for(let i=0;i<this.data.files.length;i++){

      wx.getFileSystemManager().readFile({

        filePath:this.data.files[i],

        encoding:"base64",

        success:(res)=>{

          image.push('data:image/png;base64,'+ res.data)

        }

      })

    }

    console.log('image',image)

   this.setData(

     {

     image:image,

   })

  },

 <view wx:for="{{image}}">

                <image style="height: 100rpx;width: 100rpx;src="{{item}}" mode="aspectFill"  />

            </view>

最后一次编辑于  2022-02-22
回答关注问题邀请回答
收藏

2 个回答

  • 养乐多💍
    养乐多💍
    2022-02-22

    你这能渲染了就怪了,稍等我给你改改代码

    submit(){
        let that=this;
        console.log('file',this.data.files)
        let image=[]
        for(let i=0;i<this.data.files.length;i++){
          console.log(this.data.files[i])
          wx.getFileSystemManager().readFile({
            filePath:this.data.files[i],
            encoding:"base64",
            success:(res)=>{
              image.push('data:image/png;base64,'+ res.data)
            }
          })
        }
        let times=setInterval(function(){
          if(image.length==that.data.files.length){
            clearInterval(times);
            console.log('image',image)
            that.setData({
              image
            })
          }
        },100)
     
     
      
    
    
      },
    
    2022-02-22
    有用 2
    回复 7
    • 养乐多💍
      养乐多💍
      2022-02-22
      用我改的这个就出来了
      2022-02-22
      回复
    • 最爱中二の病
      最爱中二の病
      2022-02-22
      大佬太快了,这个是为什么了
      2022-02-22
      回复
    • 养乐多💍
      养乐多💍
      2022-02-22回复最爱中二の病
      循环结束之后 wx.getFileSystemManager().readFile这个方法其实还没执行完,你得写个时间函数,监测等这个全执行完了再去渲染
      2022-02-22
      回复
    • 最爱中二の病
      最爱中二の病
      2022-02-22
      哦哦,谢谢大佬帮助
      2022-02-22
      回复
    • 养乐多💍
      养乐多💍
      2022-02-22回复最爱中二の病
      不可以,以后遇到循环里有回调的,你都注意一下,可能会有这个问题
      2022-02-22
      回复
    查看更多(2)
  • 唐显死
    唐显死
    2022-02-22

    作用域问题吧 此this非彼this

    2022-02-22
    有用
    回复 1
    • 养乐多💍
      养乐多💍
      2022-02-22
      兄弟,他的this没问题,问题出在了,循环结束之后 wx.getFileSystemManager().readFile这个方法其实还没执行完
      2022-02-22
      回复
登录 后发表内容