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”，並且您的代碼將導致超出調用堆棧的大小。

我認為，如果數組中存在“第一個”元素，則需要更改添加的邏輯，然后不要像中斷操作或類似操作那樣插入它。