状态正在改变着我

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在您在控制台中查看时显示 object 的值，而不是在记录日志时显示。我会尝试这样做：

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() {
        a.b.c++;
        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）））即可。它将游戏转换为纯数据对象，并且一切正常。