最新消息:20210917 已从crifan.com换到crifan.org

【已解决】小程序自定义组件中如何得知传入参数的数据发生变化

参数 crifan 740浏览 0评论
折腾:
【已解决】小程序自定义组件中如何对于传入参数做一些初始化和处理
期间,现在几个生命周期函数都无法找到传入的参数this.properties.curBookList是合适有值了。
使得想要对其处理的话就没法处理了。
现在看来问题转换为:
找到自定义组件外部传入的数据发生变化的时机就可以了
自定义组件重新获取了新数据后的时机是啥
这样才能去初始化数据。
突然看到:
Component 构造器 · 小程序
中有说:这个传入的值,有observer函数:
  properties: {
    myProperty: { // 属性名
      type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个
      observer: function(newVal, oldVal, changedPath) {
         // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
         // 通常 newVal 就是新设置的数据, oldVal 是旧数据
      }
    },
这里的observer就是我们要的。。。
去试试
用代码:
  properties: {
    curBookList: {
      type: Array,
      value: [],
      observer: function (newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
        // 通常 newVal 就是新设置的数据, oldVal 是旧数据
        console.log("curBookList observer: newVal=%o, oldVal=%o, changedPath=%o",
          newVal, oldVal, changedPath)
      }
    }
  },
去打印值:
第一次的新和旧都是空列表:
curBookList observer: newVal=Array(0)length: 0nv_length: (...)__proto__: Array(0), oldVal=Array(0)length: 0nv_length: (...)__proto__: Array(0), changedPath=Array(1)0: "curBookList"length: 1nv_length: (...)__proto__: Array(0)
第二次就有值了:
小程序中,对于父元素传递进来的参数,在发生变化时,是可以通过:
property的observer函数去检测到,从而进来相关处理
-》类似于ReactJS中的componentWillReceiveProps的机制
只不过componentWillReceiveProps是统一的入口处理所有参数,可能传入的值发生了变化
-》而小程序中单个property中的参数的observer,则是针对每个参数的
不过,突然发现:
此处本来是打算:
针对curBookList的新的值去处理,去更改掉curBookList的值
-》这样会不会导致死循环:无限调用observer了啊。。。
好像不支持:在observer中,return 返回处理后的新的值
小程序 property observer
微信小程序填坑之—自定义组件 – 前端 – 掘金
微信小程序自定义组件 – 简书
在已有小程序项目中添加了toast组件,然后报错Cannot read property ‘globalData’ of undefined; · Issue #74 · meili/min-cli
【已解决】自定义组件 properties observer this 引用 – 小程序开发问答 – 51小程序
微信小程序 发现之旅(二)—— 自定义组件 – WiseWrong – 博客园
【总结】
现在能想到2个办法:
  • 即使会导致死循环更新数据的话,也可以去判断是否新增了字段,而不去更新,即可避免死循环
  • 直接把property的值,赋值给data中 -》界面上不引用property值,直接引用data中的值,就好了
    • 貌似这个机制更清晰,用此方案
相关代码:
components/book_list/book_list.js
// components/book_list.js
const app = getApp() //获取应用实例
const util = require('../../utils/util.js')
const book_common = require('../../utils/book_common.js')

Component({
  lifetimes: {
...
  },

  pageLifetimes: {
...
  },

  /**
   * 组件的属性列表
   */
  properties: {
    curBookList: {
      type: Array,
      value: [],
      observer: function (newBookList, oldBookList, changedPath) {
        console.log("curBookList observer: newBookList=%o, oldBookList=%o, changedPath=%o",
          newBookList, oldBookList, changedPath)

          if(newBookList){
            var processedList = this.processBookList(newBookList)
            console.log("processedList=%o", processedList)
            this.setData({
              processedBookList: processedList
            })
          }
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    processedBookList: []
  },

  /**
   * 组件的方法列表
   */
  methods: {

    // process book item to add extra field for show
    processBookList: function (originBookList) {
      ...
      return processedBookList
    },
  },

})
然后显示中就可以正常调用processedBookList了:
components/book_list/book_list.wxml
  <view class='book_list'>
    <view
      id="{{curBookItem.id}}"
      wx:for="{{processedBookList}}"
      wx:for-index="bookIdx"
      wx:for-item="curBookItem"
      wx:key="id"

      class='book_list_item'
      bindtap='bookItemClickCallback'
    >
...
显示出book_list了:

转载请注明:在路上 » 【已解决】小程序自定义组件中如何得知传入参数的数据发生变化

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
90 queries in 0.210 seconds, using 23.33MB memory