javascript - 尝试添加新对象时，我的 javascript 数组不断被覆盖

Question

我正在使用带有纯 JavaScript 的 NativeScript 核心。但我不认为这就是问题所在。我的问题的基础是我试图将一个新对象添加到全局数组中，当我这样做时，我以前的数据不断被新对象覆盖。

我尝试过普通的 array.push({data}) 和 ES6 spread [...array, {data}]。这两种方法最终都会用新对象覆盖数组中以前的数据。

记录页面.js

// import statements

// variables

// 'global' array of markers. 
var markers = [];

// this function opens a custom modal 
function addObsticalTapped(args) {

  // close the popup
  var page = args.object.page;
  var popup = page.getViewById("trailNotesPopup");
  isShown = false;

  popup.animate({
    translate: {
      x: 0,
      y: 500
    },
    duration: 300,
    curve: enums.AnimationCurve.easeInOut
  });

  var mainView = args.object;
  var context = {};

  geolocation
    .getCurrentLocation({
      desiredAccuracy: Accuracy.high
    })
    .then(loc => {
      curLoc = loc;
    });


  mainView.showModal(obsticalModal, context, addObsticalIcon, false);
}
exports.addObsticalTapped = addObsticalTapped;

// callback function when the modal is closed
function addObsticalIcon(didConfirm, data) {
  if (didConfirm) {
    // this is where the problem is, the markers array is being overwritten
    //     when adding another marker
    markers = [...markers, {
      type: "obstical",
      location: {
        lat: curLoc.latitude,
        lng: curLoc.longitude
      },
      data: data,
      trail_id: ""
    }];

    map.addMarkers([{
      id: markerID,
      lat: curLoc.latitude,
      lng: curLoc.longitude,
      //icon: "res://obstical_icon"
      iconPath: "./icons/obstical_icon_marker.png"
    }]);
    markerID++;

    console.log(JSON.stringify(markers));
  } else {
    console.log("closed");
  }
}

obstical-modal.js

function onShownModally(args) {
    const context = args.context;
    closeCallback = args.closeCallback;
    const page = args.object;

    vm = observableModule.fromObject(context);
    vm.set("oneSelected", oneSelected ? oneOn : oneOff);
    vm.set("threeSelected", threeSelected ? threeOn : threeOff);
    vm.set("sixSelected", sixSelected ? sixOn : sixOff);
    vm.set("nineSelected", nineSelected ? nineOn : nineOff);

    page.bindingContext = vm;
}
exports.onShownModally = onShownModally;

function onCancel(args) {
    closeCallback(false, {});
}
exports.onCancel = onCancel;

function onSubmit(args) {
    var page = args.object.page;
    var textField = page.getViewById("info");
    data.info = textField.text;
    closeCallback(true, data);
}
exports.onSubmit = onSubmit;

我期望发生什么:障碍一的难度为 1，信息为“hello world”然后将其添加到数组中，数组就正确了。然后我添加另一个难度为 3 的障碍和“hello code”信息当它被添加到数组中时，数组看起来像:

[{"type":"obstical","data":{"difficulty":3,"info":"hello code"}},{"type":"obstical","data":{"difficulty":3,"info":"hello code"}}]

Answer 1

我本来打算将此作为评论，但想通过编写一些简化版本的代码向您展示我认为您做错了什么的示例。

const data = {
  difficulty: '1',
  info: 'hello code',
};

const markers = [];

markers.push({
  type: 'obstical',
  data: data,
});

// Here is the problem. The problem is not related to the array adding
data.difficulty = '3';

markers.push({
  type: 'obstical',
  data: data,
});

该问题与您如何添加到数组无关，而是您正在改变原始数据对象。解决方案如下

const data = {
  difficulty: '1',
  info: 'hello code',
};

const markers = [];

markers.push({
  type: 'obstical',
  data: data,
});

// create a new object instead of mutating the existing one
const newData = {
  ...data,
  difficulty: '3',
};

markers.push({
  type: 'obstical',
  data: newData,
});