父页面传递给组件的数据变更，子组件监控不到。
发布于 7 年前 作者 huangwei 13806 次浏览 来自 问答

父页面wxml：

<dropdownmenu wx:if="{{currentTabIndex === 0}}" dropDownMenuTitle='{{dropDownMenuTitle}}' dropDownMenuDistrictData='{{data1}}' dropDownMenuFilterData='{{data2}}' bind:selectedItem='selectedItem'/>

父页面js：

data1一级菜单是写死的就2个。

data: {
  data1: [{
                id: 0,
                title: '不限',
            },
            {
                id: 1,
                title: '汽修',
                enTitle: 'qixiu',
                childModel: []
            },
            {
                id: 2,
                title: '汽配',
                enTitle: 'qipei',
                childModel: []
            }
        ],
}

data1二级菜单是动态获取的。

getCategoryList() {
        let that = this;
        topicApi.getCategoryList(that);
    },

topicApi中的getCategoryList方法

function getCategoryList(pageObj) {
  let that = pageObj;
  that.data.data1.forEach((item, index) => {
    if (item.enTitle) {
 
      let trade = item.enTitle;
 
      util.request(`${api.getCategoryList}?trade=${trade}`).then(res => {
        let childModel = [];
        res.data.forEach((item2, index2) => {
          let childModelElement = {
            id: `${index}-${index2 + 1}`, // '1-1',
            title: item2
          };
          childModel.push(childModelElement);
        }); // res.data.forEach
        console.log('——————————childModel: ', childModel); // 调试用
        that.data.data1[index].childModel = that.data.data1[index].childModel.concat(childModel);
        console.log('——————————that.data.data1[index]: ', that.data.data1[index]); // 调试用
      }); // util.request
 
    } // if (item.enTitle)
  }); // forEach
  that.setData({
    data1: that.data.data1
  })
  console.log('——————————that.data.data1: ', that.data.data1); // 调试用
}

子组件相关代码：

Component({
  properties: {
    dropDownMenuDistrictData: {
      type: Array,
      value: [],
      observer: function (newVal, oldVal) {
        console.log('——————————属性改变了, new, old: ', newVal, oldVal); // 调试用
        console.log('——————————this.properties.dropDownMenuDistrictData: ', this.properties.dropDownMenuDistrictData);
      }
    },
  }
}

问题，当data1固定值时，显示是正常的。

而当data1是我如上面代码是动态的时候，显示就为空。主要是属性变更无法监控到，网络请求还在属性变更之后。打印的日志如下。

求懂的人指点一二，跪谢

2 回复

6666

解决了。

function getCategoryList(pageObj) {
  let that = pageObj;
  that.data.data1.forEach((item, index) => {
    if (item.enTitle) {
 
      let trade = item.enTitle;
 
      util.request(`${api.getCategoryList}?trade=${trade}`).then(res => {
        let childModel = [];
        res.data.forEach((item2, index2) => {
          let childModelElement = {
            id: `${index}-${index2 + 1}`, // '1-1',
            title: item2
          };
          childModel.push(childModelElement);
        }); // res.data.forEach
        console.log('——————————childModel: ', childModel); // 调试用
        that.data.data1[index].childModel = that.data.data1[index].childModel.concat(childModel);
        // let data1Name = 'that.data.data1[' + index + '].childModel';
        // that.setData({
        //   [data1Name]: that.data.data1[index].childModel.concat(childModel)
        // })
        console.log('——————————that.data.data1[index]: ', that.data.data1[index]); // 调试用
      }).then(() => {
        that.setData({
          data1: that.data.data1
        })
        console.log('——————————that.data.data1: ', that.data.data1); // 调试用
      }); // util.request
 
    } // if (item.enTitle)
  }); // forEach
}

汗颜。要更深刻的理解异步的概念。

回到顶部