对服务端返回数据增加字段出现的bug

对服务端返回数据增加字段出现的bug 前言：

相信大家在处理数据时，会遇到这样的情况，对一个服务端返回数据进行处理，比如一下的服务端数据结构

    list =  [
        {
            appInfoDto: {
                appDesc: null,
                appIconUrl: "http://www.kaotop.com/file/tupian/20220526/2c1521d6ced7cc0b3e8446c93a18a758.png",
                appId: 3062312,
                appName: "迷你世界",
                installed: false,
                pkgName: "com.minitech.miniworld.nearme.gamecenter"

            },
            giftInfoDtos: [
                {
                    appIconUrl: "http://www.kaotop.com/file/tupian/20220526/2c1521d6ced7cc0b3e8446c93a18a758.png",
                    giftContent: "迷你世界等级7",
                    giftId: 410466,
                    giftName: "迷你世界等级7",
                    minVipLevelName: "金珀",
                    pkgName: null,
                    receiveWay: "迷你世界等级7"
                }
            ]
        },
                {
            appInfoDto: {
                appDesc: null,
                appIconUrl: "http://www.kaotop.com/file/tupian/20220526/2c1521d6ced7cc0b3e8446c93a18a758.png",
                appId: 3062312,
                appName: "迷你世界",
                installed: false,
                pkgName: "com.minitech.miniworld.nearme.gamecenter"

            },
            giftInfoDtos: [
                {
                    appIconUrl: "http://www.kaotop.com/file/tupian/20220526/2c1521d6ced7cc0b3e8446c93a18a758.png",
                    giftContent: "迷你世界等级7",
                    giftId: 410466,
                    giftName: "迷你世界等级7",
                    minVipLevelName: "金珀",
                    pkgName: null,
                    receiveWay: "迷你世界等级7"
                }
            ]
        },
    ];

appInfoDto这个代表了一个游戏的基本信息，giftInfoDtos代码了这个游戏内部的礼包，明显这个礼包是有很多的，那么可能就需要一个按钮去处理礼包展示的逻辑，比如初始化只展示2个，当点击按钮时展示剩余全部礼包，在点击又变成2个，在这个当时就遇到一个bug

1.我们想在每个appInfoDto对象内增加一个字段isShowMore去判断对应游戏是否展开更多是收起的效果

//html代码
      
          
              收起
              
                   
              
          
          
              查看更多
              
                 
              
          
      

//js代码
  // 获取玩家大礼包列表
  async getPlayerGiftMoreList(queryInfo): Promise {
      const start = this.queryInfo.start; //获取第0页
      this.isShowLoading = true;
      const res = await Ajax({
          url: '/empowerment/newamber/gift/app',
          type: 'GET',
          data: queryInfo
      });
      if(res.resultCode === '300200') {
          res.t.pageInfo.list.map((item) => {
              item.appInfoDto.isShowMore = true;
          });
          this.playerGiftMoreList = [...this.playerGiftMoreList, ...res.t.pageInfo.list];
          this.isShowLoading = false;
      }
      // this.playerGiftMoreList.map((item) => {
      // item.appInfoDto.isShowMore = true;
      // });
  }

  // 点击查看更多
  private isShowContent(appId): void {
      console.log(appId);
      this.playerGiftMoreList.map((item) => {
          if(item.appInfoDto.appId === appId) {
              item.appInfoDto.isShowMore = !item.appInfoDto.isShowMore;
          }
      });
      this.getPlayerGiftMoreListAll(this.moreListAll, appId);
      console.log('查看更多', this.playerGiftMoreList);
  }


  // 点击收起
  private isHiddenContent(appId): void {
      this.playerGiftMoreList.map((item) => {
          if(item.appInfoDto.appId === appId) {
              item.appInfoDto.isShowMore = !item.appInfoDto.isShowMore;
              item.giftInfoDtos = item.giftInfoDtos.slice(0, 2);
          }
      });
      console.log('收起');
  }

  // 获取单个游戏的所有礼包数据
  async getPlayerGiftMoreListAll(moreListAll, appId): Promise {
      const res = await Ajax({
          url: '/empowerment/newamber/gift/app/giftInfo',
          type: 'GET',
          data: { ...moreListAll, appId: appId }
      });
      this.playerGiftMoreList.map((item) => {
          if(item.appInfoDto.appId === appId) {
              item.giftInfoDtos = res.t;
          }
      });
  }

在// 获取玩家大礼包列表时，当时不知道为啥，点击按钮时isShowMore 状态会发生变化，但是视图一直不会更新，后面才发现

        if(res.resultCode === '300200') {
            res.t.pageInfo.list.map((item) => {
                item.appInfoDto.isShowMore = true;
            });
            this.playerGiftMoreList = [...this.playerGiftMoreList, ...res.t.pageInfo.list];
            this.isShowLoading = false;
        }
        // this.playerGiftMoreList.map((item) => {
        // item.appInfoDto.isShowMore = true;
        // });

是在对 this.playerGiftMoreList 赋值之后，才进行isShowMore初始化，导致isShowMore 并没有挂载上去，无法进行vue的双向绑定，this.playerGiftMoreList 赋值之前进行isShowMore初始化，发现视图终于可以发生相应，

2.总结 对 this.playerGiftMoreList 赋值之后才进行isShowMore初始化

1.isShowMore值无论是在本地如何打印，都是会发生变化的，而且变化的逻辑也是没有问题的，只是数据改变了，但是视图没有任何变化，这种bug如果只在逻辑上找是无法快速的找出问题的，
2.给一个对象挂载一个新的不存在的字段，一定要先挂载，然后在把这个对象的值赋值给我们需要循环的数据（data）