数组更新两个方法一起使用导致数组数据一直新增

Question

我有三个方法其中两个方法是调用了第三个方法，第一个方法是定时请求数据，定时请求的数据会把之前的数据给覆盖就是说最新的数据，第二个方法是下拉请求数据，就是说请求更多条数的数据，也会有数据刷新，第一和第二个方法单独使用没有问题，但是一起使用就会导致数据累加，例如我下拉一次就是20条然后开启定时旧数据不会清空，而是遗留在我的数组里面，导致每三秒就会向数组push20条新数据，旧数据又没有清掉，请问这应该如何解决

定时请求的方法
startTimer() {
                this.timer = setInterval(() => {
                    var params = {
                        Page: 1,
                        Size: this.mescroll.num * this.mescroll.size,
                        ProjectId: this.siteId,
                        deviceId: this.deviceId,
                        measureId: this.measureId,
                        Text: this.DeviceTypeName
                    };
                    this.getList(params);
                }, 3000);
            },

下拉刷新的方法，每次下拉刷新都是请求分页十条数据
async upCallback(mescroll) {
                var params = {
                    Page: mescroll.num,
                    Size: mescroll.size,
                    ProjectId: this.siteId,
                    deviceId: this.deviceId,
                    measureId: this.measureId,
                    Text: this.DeviceTypeName
                };
                await this.getList(params);
                //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                this.mescroll.endBySize(this.measureRes.data.list.length, this.measureRes.data
                    .total); //必传参数(当前页的数据个数, 总数据量)
            },

// 获取分页数据
            async getList(measureParamse) {
                var measureIds;
                // 获取实时数据的测点
                this.measureRes = await apiGetReal_measure(measureParamse);
                
                if (this.measureRes.success) {
                    // 若是第一页，则将测点数组重置
                    if (this.mescroll.num == 1) this.measureArr = [];
                    this.measureArr = this.measureArr.concat(this.measureRes.data.list);

                    // 通过测点，获取到测点id的集合，传递给apiPostReal_values，通过此集合获取到对应的实时数据
                    measureIds = this.measureArr.map(item => {
                        return item.measureId;
                    });
                }
                // 根据测点id，获取到该测点的实时数据
                let realValueParams = {
                    ids: measureIds
                };
                let realValueRes = await apiPostReal_values(realValueParams);
                if (realValueRes.success) this.realValueArr = realValueRes.data;

                // 将测点数组  与  实时数据数组  组合起来  组成this.info渲染数据
                for (let i = 0; i < this.measureArr.length; i++) {
                    this.realValueArr.map(item => {
                        if (this.measureArr[i].measureId == item.measureId) {
                            if (this.measureArr[i].sampleTime !== item.sampleTime) this.measureArr[i]
                                .sampleTime = item.sampleTime;
                            if (this.measureArr[i].sampleValue !== item.sampleValue) this.measureArr[i]
                                .sampleValue = item.sampleValue;
                        }
                    });
                }
                
                this.Info = this.measureArr;
                console.log(this.Info);
                // let val=this.measureArr[8].sampleValue;
                // let foo=this.measureArr[8].printf;
                // console.log("格式化后",formatDisplay(val,foo));
            },

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
问题的关键在于，当您在下拉刷新时调用 getList 方法时，您将新的数据附加到了 this.measureArr 中。但是，当您在定时请求时调用 getList 方法时，您只是将新的数据赋值给了 this.measureArr，而没有清除旧数据。因此，在下一次定时请求时，您的 measureArr 将包含旧的数据和新的数据，导致数据累加。
-
为了解决这个问题，您可以在每次调用 getList 方法时先清除 measureArr 数组，然后再将新数据添加到数组中。这样，在每次更新数据时，数组将始终只包含最新的数据，而不会累加旧数据。
-
修改您的 getList 方法，如下所示：

async getList(measureParamse) {
  var measureIds;
  // 获取实时数据的测点
  this.measureRes = await apiGetReal_measure(measureParamse);
  
  if (this.measureRes.success) {
    // 若是第一页，则将测点数组重置
    if (this.mescroll.num == 1) this.measureArr = [];
    else this.measureArr.splice(this.measureArr.length - this.measureRes.data.list.length);
    
    // 将新的数据添加到数组中
    this.measureArr = this.measureArr.concat(this.measureRes.data.list);
    
    // 通过测点，获取到测点id的集合，传递给apiPostReal_values，通过此集合获取到对应的实时数据
    measureIds = this.measureArr.map(item => {
      return item.measureId;
    });
  }
  
  // 根据测点id，获取到该测点的实时数据
  let realValueParams = {
    ids: measureIds
  };
  let realValueRes = await apiPostReal_values(realValueParams);
  if (realValueRes.success) this.realValueArr = realValueRes.data;

  // 将测点数组  与  实时数据数组  组合起来  组成this.info渲染数据
  for (let i = 0; i < this.measureArr.length; i++) {
    this.realValueArr.map(item => {
      if (this.measureArr[i].measureId == item.measureId) {
        if (this.measureArr[i].sampleTime !== item.sampleTime) this.measureArr[i]
          .sampleTime = item.sampleTime;
        if (this.measureArr[i].sampleValue !== item.sampleValue) this.measureArr[i]
          .sampleValue = item.sampleValue;
      }
    });
  }
  
  this.Info = this.measureArr;
  console.log(this.Info);
  // let val=this.measureArr[8].sampleValue;
  // let foo=this.measureArr[8].printf;
  // console.log("格式化后",formatDisplay(val,foo));
},

在这个修改版本的代码中，当下拉刷新时，getList 方法将使用 splice 方法从数组的末尾删除旧数据，然后将新的数据添加到数组中。这样，数组始终只包含最新的数据，避免了数据累加的问题。