状态正在改变着我

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）））。 它将游戏转换为纯数据对象，并且一切正常。