KnockoutJS：在订阅回调中修改可观察数组时进行无限递归

Question

我不明白为什么下面的代码片段会导致无限递归：

var observableArray = ko.observableArray();
observableArray.subscribe(function (changes) {
    changes.forEach(function(change) {
        console.log("change: " + JSON.stringify(change));
        if (change.status === 'added') {
            if (change.value === "first") {
                observableArray.push("second");
            }
        }
    });
}, null, "arrayChange");

observableArray.push("first");

这是控制台日志：

change: {"status":"added","value":"first","index":0}    
change: {"status":"added","value":"first","index":0}  
change: {"status":"added","value":"first","index":0}  
change: {"status":"added","value":"first","index":0}  
change: {"status":"added","value":"first","index":0}  
...  
Uncaught RangeError: Maximum call stack size exceeded  

我真的不明白这里发生了什么。 有人可以帮我吗？

Answer 1

这看起来像是逻辑错误

var observableArray = ko.observableArray();
 console.log(changes);  //Add log here
observableArray.subscribe(function (changes) {
    changes.forEach(function(change) {
        console.log("change: " + JSON.stringify(change));
        if (change.status === 'added') {
            if (change.value === "first") {
                observableArray.push("second");
            }
        }
    });
}, null, "arrayChange");

observableArray.push("first"); 

根据您的订阅逻辑，如果已经存在“ first”值，则不想添加。 但是，该“第一个”值将始终存在于可观察数组中。 添加控制台日志，就像我在上面的代码中添加的一样。

现在这就是您将看到的输出

您已经添加了observableArray.push（“ second”）; 但是，在同一可观察数组中，“ first”始终存在，并且代码将继续添加“ second”，并且您的代码将导致超出调用堆栈的大小。

我认为，如果数组中存在“第一个”元素，则需要更改添加的逻辑，然后不要像中断操作或类似操作那样插入它。