狀態正在改變着我

Question

我遇到一個非常奇怪的問題，即突變（！）中的狀態改變。 在我的變異中，我在前兩行記錄以下內容：

console.log('mutation state:', state)
console.log('mutation state.game.gameTree[2]:', state.game.gameTree[2]) 

預期： state.game.gameTree相同

實際：不是！ 如您在屏幕快照上看到的， state.game.gameTree[2].activeActionId不相同。

該值如何從第1行更改為第2行？ 我希望有人能幫幫忙 ：）

Answer 1

Chrome瀏覽器會在您在控制台中查看對象時顯示該對象的值，而不是在記錄該對象時顯示它的值。 我會嘗試這樣做：

console.log('mutation state:', JSON.parse(JSON.stringify(state)))
console.log('mutation state.game.gameTree[2]:', JSON.parse(JSON.stringify(state.game.gameTree[2])))

如果仍然遇到相同的問題，則說明發生了一些奇怪的事情。

例如，如果您有：

 function example() { var a = { b: { c: 1 }}; return function() { abc++; return a; } } var wtf = example() console.log(wtf()) console.log(wtf()) console.log(wtf()) 

您會在這里看到它按預期增加。 如果您在chrome中運行它，則會看到：

{b: {…}}
{b: {…}}
{b: {…}}

然后當您展開它時，它們都將顯示相同的值。

Answer 2

正如戴夫已經提到的那樣，如果將鼠標懸停在擴展對象右側的i上，您將看到“它已被評估”。 換句話說，它將在擴展時檢查該值是什么，而不是記錄該值時的值。

如果您需要調試快速變化的內容，請使用debugger語句。 這將暫停執行並在您的源代碼中顯示調試器語句。 您可以將鼠標懸停在變量上以查看其內容，或在右側的某個范圍內找到變量。 您可以單步執行代碼以查看變量如何變化。 如果您記錄了一些內容，則由於執行已停止，因此您將在記錄對象時對對象進行實際評估：

console.log(x);
debugger;

Answer 3

我找到了原因。 謝謝你們的建議。 他們對指導我朝正確的方向很有幫助。

我實際上是在期望簡單數據對象的域函數中對游戲對象進行變異。 我一直認為我的域函數是不可變的，因為它們都使用散布運算符返回新的數據對象。 來自基於不可變反應流的功能框架，這從來就不是問題。

但是，借助Vue，我意識到這可能會帶來問題，因為Game不再是普通的數據對象。 我將不得不研究如何對此進行最佳處理。

目前，可以使用JSON.parse（JSON.stringify（state）））。 它將游戲轉換為純數據對象，並且一切正常。