函数返回的内存引用问题(React Javascript)

Question

所以我在React.js中工作。我需要生成同一列表的三个版本，但三个事件中的每一个都包含不同的市场集。我希望事件是一样的。但当它们与市场联系在一起时，三个相同的事件中的每一个都可能根据申报人有不同的市场子集。

organiseEvents(timeFilter) {
const propevents = this.props.Properties.events;
const propmarkets = this.props.Properties.markets;
const propselections = this.props.Properties.selections;
let events = new Array();
propevents.forEach(e => {
e.Markets = propmarkets.filter(m => m.Values.eventid === e.Id && m.Values.name.toUpperCase().includes(timeFilter));
e.Markets.forEach(m => {
m.Selections = propselections.filter(s => s.Values.marketid === m.Id);
});
events.push(e);
});
if(events.length > 0) {
events = events.sort(function (a, b) { return a.Values.homerotation - b.Values.homerotation });
return events;
} else{
return [];
}
}
render() {
let events = this.organiseEvents("");
let midevents = this.organiseEvents("MIDEVENT");
let postevents = this.organiseEvents("POSTEVENT");
}

我遇到的问题是：

• this.organizeEvents("(运行：events包含两个"event"对象，每个对象有三个市场
• this.organizeEvents("MIDEVENT"(运行：midevents包含相同的两个"event"对象，但没有市场，因为没有市场可以匹配过滤器
• 事件也成为这个的结果。organizeEvents("MIDEVENT"(
• 事件和midevents将成为其结果。organizeEvents("POSTEVENT"(

某个地方有参考问题，我一辈子都无法发现。我觉得我错过了显而易见的东西。

每三个let变量都应该是相同两个事件的三个完全独立的表示，但其中包含不同的市场。

我同时发现的一个修复方法如下：

let events = JSON.parse(JSON.stringify(this.organiseEvents("")));
let midevents = JSON.parse(JSON.stringify(this.organiseEvents("MIDEVENT")));
let postevents = JSON.parse(JSON.stringify(this.organiseEvents("POSTEVENT")));

这将强制三个值中的每一个不引用同一个位置。然而，在我看来，这是一个肮脏的解决方案，它很方便地解决了问题，而不是我理解问题是什么并正确地解决它。

谢谢。

Answer 1

每次调用organizeEvents函数时，它只是使用相同的数组并对其进行变异/更改。

在哪里使用相同的数组

const propevents = this.props.Properties.events; // (Properties.events) is an array that you are mutating

在这里，您刚刚将数组分配给了一个变量propevents。这并不意味着数组被复制到变量中。该变量只是引用了同一个数组。

数组在哪里发生突变/更改

1.

propevents.forEach(e => { 
e.Markets = propmarkets.filter(m => m.Values.eventid === e.Id && m.Values.name.toUpperCase().includes(timeFilter));

在这里，您正在循环遍历propevents数组，并且对于该数组中的每个元素，您将对属性Markets(它是一个数组(进行赋值/更改。

2.

e.Markets.forEach(m => {
m.Selections = propselections.filter(s => s.Values.marketid === m.Id);
});

在这里，您再次循环上述突变/更改的Markets，对于Markets数组中的每个元素，您都在突变/更改属性Selections(它也是一个数组(。

解决方案

这个问题的解决方案是深度复制数组并对其进行变异/更改。

如何

1. 您可以制作一个深度复制数组和对象的实用程序函数。

   // it's not the best but it does the job
   function deepCopy(o) {
   let output, v, key;
   output = Array.isArray(o) ? [] : {};
   for (key in o) {
   v = o[key];
   output[key] = typeof v === "object" && v !== null ? deepCopy(v) : v;
   }
   return output;
   };
   

2. 在organizeEvents功能中使用

   const propevents = deepCopy(this.props.Properties.events);