无法从数组移除元素：locationData数组未同步更新问题求助

我尝试从locationData数组中移除不再存在的store.state.location.locations实例，但即便这些实例不再传入，它们仍保留在locationData数组中。

相关代码：

targetLocations() {
  // 记录搜索开始时间
  this.startTime = new Date().toTimeString()

  // 每秒更新一次locationData
  setInterval(() => {
    const filteredLocations = store.state.location.locations.filter(coords => coords.socketId && coords.phoneNumber);
    const hasChanged = JSON.stringify(filteredLocations) !== JSON.stringify(this.locationData);

    if(hasChanged) {
      this.locationData = filteredLocations;

      this.map.getSource('data-source').setData({
        "type": "FeatureCollection",
        "features": this.locationData.map(this.targetElements)
      });

      // 打印phoneNumber测试
      filteredLocations.forEach(location => console.log(location.phoneNumber+'\n'));
    }
  }, 1000);
},

问题根源 #

你用JSON.stringify()来判断数组是否变化的逻辑存在缺陷：

• 对象属性顺序可能不一致，导致内容相同却被判定为有变化，或者内容不同但序列化字符串一致。
• 数组元素是引用类型时，JSON.stringify无法精准捕捉实例的引用变化，可能出现数据源已更新但比较结果误判的情况。

解决方案 #

方案1：基于唯一标识做精准比较 #

既然每个location有唯一的phoneNumber，可以用这个字段判断元素的增减：

targetLocations() {
  this.startTime = new Date().toTimeString()

  setInterval(() => {
    const filteredLocations = store.state.location.locations.filter(coords => coords.socketId && coords.phoneNumber);
    
    // 提取新旧数组的phoneNumber集合
    const oldPhones = new Set(this.locationData.map(loc => loc.phoneNumber));
    const newPhones = new Set(filteredLocations.map(loc => loc.phoneNumber));
    
    // 判断是否有元素新增或移除
    const hasChanged = oldPhones.size !== newPhones.size || 
                       ![...oldPhones].every(num => newPhones.has(num));

    if(hasChanged) {
      this.locationData = filteredLocations;
      this.map.getSource('data-source').setData({
        "type": "FeatureCollection",
        "features": this.locationData.map(this.targetElements)
      });
      filteredLocations.forEach(location => console.log(location.phoneNumber+'\n'));
    }
  }, 1000);
},

方案2：直接跳过比较，强制更新 #

如果数组元素数量不多，性能压力小，可以去掉比较逻辑，直接每秒更新数据：

targetLocations() {
  this.startTime = new Date().toTimeString()

  setInterval(() => {
    const filteredLocations = store.state.location.locations.filter(coords => coords.socketId && coords.phoneNumber);
    this.locationData = filteredLocations;
    
    this.map.getSource('data-source').setData({
      "type": "FeatureCollection",
      "features": this.locationData.map(this.targetElements)
    });
    
    filteredLocations.forEach(location => console.log(location.phoneNumber+'\n'));
  }, 1000);
},

额外检查点 #

• 先确认store.state.location.locations本身已经移除了不需要的元素，可以在定时器里打印这个数组，验证数据源是否正确更新。
• 如果是Vue项目，确保locationData是在data中声明的响应式变量，否则赋值后视图不会同步更新。

内容的提问来源于stack exchange，提问作者JTip