1.3.26版本 数组里的数据被污染覆盖

[KanChaiShaoXia]

问题描述

一个用作于小程序的地图组件的数组，每次点击一个对象就改变这个对象的active值为true。其他的变为false

复现步骤

 [
    { name: "aaa", active: false },
    { name: "bbb", active: false },
    { name: "ccc", active: false },
    { name: "ddd", active: false },
    { name: "eee", active: false },
    { name: "fff", active: false },
  ];

然后当我连续点击到第三个对象时，第一个对象的内容就变成了第三个对象。

 [
    { name: "ccc", active: false },   // 这个值被覆盖
    { name: "bbb", active: false },
    { name: "ccc", active: true },  // 点到这里
    { name: "ddd", active: false },
    { name: "eee", active: false },
    { name: "fff", active: false },
  ];

然后我遍历重置把所有active变成false
然后我继续点往下点，同样的点到第三下的时候。点击第一下的对象就又变成了第一次出现被复制的那个值

[
    { name: "ccc", active: false },   // 这个值被覆盖
    { name: "bbb", active: false },
    { name: "ccc", active: false },
    { name: "ccc", active: false },   // 这个值被覆盖
    { name: "eee", active: false },
    { name: "fff", active: true },  // 点到这里
  ];

如果没有全部重置而是继续点的话只会发生第一次覆盖，后续点击不会出现问题。

如果每次我点击一下，然后重置一遍。再点击一下的时候，之前点击的对象数据也会被覆盖，但覆盖数据不确定是从哪里来的。似乎没有规律

代码

// 点击标记点
 const clickMark = data => {
   // 从数组中找到当前点击id的对象
   itemArr.forEach(item => {
     if (data.markerId === item.shopPo.id) {
       // 整理数据，激活active
       itemForEach(itemArr, locationBackUp, data.markerId);
     }
   });
 };

// 遍历数据
const itemForEach = (data, loca, activeId?: number) => {
  data.map(item => {
      // 判断当前item是否为被点击的对象
      const active = activeId === item.shopPo.id;
      Object.assign(item.shopPo, { active });
  });
  // 更新state
  setItems(data);
  // 更新小地图标记点
  mark({ data });
};

// 遍历mark标记
 const mark = ({ data }) => {
  const arr: any = [];
  data.map(item => {
    const obj = {
      longitude: item.shopPo.pointx,
      latitude: item.shopPo.pointy,
      id: item.shopPo.id,
      width: item.isSupShop ? 27.5 : 22.5,
      height: 26.5,
      zIndex: item.shopPo.active ? 999999 : item.shopPo.id,
      iconPath: item.shopPo.active   // 是否高亮icon
        ? require("../../static/img/page/shop/addrsup.png")
        : require("../../static/img/page/shop/shop.png")
    };
    arr.push(obj);
  });
  // 更新state
  setMarkArr(arr);
};

// 点击地图
 const clickMap = () => {
     // 重置标记点
     itemForEach(itemArr, locationBackUp);
 };

期望行为

代码在1.3.25上没有复现。希望解决这个问题。

系统信息

Taro v1.3.26

Taro CLI 1.3.26 environment info:
System:
OS: macOS 10.15.1
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
Yarn: 1.19.2 - /usr/local/bin/yarn
npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
npmPackages:
@tarojs/async-await: 1.3.26 => 1.3.26
@tarojs/components: 1.3.26 => 1.3.26
@tarojs/plugin-babel: 1.3.26 => 1.3.26
@tarojs/plugin-csso: 1.3.26 => 1.3.26
@tarojs/plugin-sass: 1.3.26 => 1.3.26
@tarojs/plugin-uglifyjs: 1.3.26 => 1.3.26
@tarojs/router: 1.3.26 => 1.3.26
@tarojs/taro: 1.3.26 => 1.3.26
@tarojs/taro-alipay: 1.3.26 => 1.3.26
@tarojs/taro-h5: 1.3.26 => 1.3.26
@tarojs/taro-swan: 1.3.26 => 1.3.26
@tarojs/taro-tt: 1.3.26 => 1.3.26
@tarojs/taro-weapp: 1.3.26 => 1.3.26
@tarojs/webpack-runner: 1.3.26 => 1.3.26
eslint-config-taro: 1.3.26 => 1.3.26
eslint-plugin-taro: 1.3.26 => 1.3.26
nerv-devtools: ^1.5.6 => 1.5.6
nervjs: ^1.5.6 => 1.5.6
react: ^16.12.0 => 16.12.0
stylelint-config-taro-rn: 1.3.26 => 1.3.26
stylelint-taro-rn: 1.3.26 => 1.3.26

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[zzzhan]

关注，我也出现类似的问题-_-!!!

[KanChaiShaoXia]

关注，我也出现类似的问题-_-!!!

我这边似乎发现了问题所在。

我是有两个数据，一个原数据一个展示数据，原数据没有任何被二次修改的地方，但却被污染覆盖。原因可能是因为曾经把原数据set给了展示数据，然后展示数据又被修改过。导致内存地址变成了同一个。

我现在的临时措施是把二者相关联的时候用JSON.parse(JSON.stringify());写了个新变量，暂时避免了这个问题。

你找一找你的代码里有没有和我类似的片段。

以前在taro里遇到过这种问题，不过这次的问题还确实是升级之后才出现的。。

[zzzhan]

我还在用1.3.4, 我都返原回去了。 知道怎么解决。我是用Object.assign把显示的数据复制一次。但这个对开发来说无疑是个大坑，很恐怖的事情，污染这个是不能接受的。估计是编译生成小程序代码时出了问题.

[arvinxx]

#4980 和我遇到的问题一致，我回退到 1.3.25 了。不修复不准备升级了

[zomem]

看来我也只有退回1.3.25了

[dreamthen]

1.3.25是好的，暂时先停留在这个版本吧，没办法，期待这个问题的修复～

[Chen-jj]

@LetterYan 提供一下完整可复现代码

[Chen-jj]

#5012