如何在 immer 回调中调试/记录有用的信息？

Question

我在React应用程序中使用immer来处理状态更改。比方说，国家并没有改变，因为我所料，所以我想调试它，但两者console.log并debugger给出了一个Proxy不包含任何有用的信息，比如什么是当时的状态对象。

获取新状态的示例代码：

return immer(state, draftState => {
    // Some mutations here, didn't go as expected
    console.log(draftState.blah) // Gives 'Proxy' object
    debugger // Same deal
  })

如何调试我的代码？

Answer 1

如果您对草稿进行序列化/反序列化，输出将是一个普通的 JavaScript 对象，并将在控制台中显示为这样。

console.log(JSON.parse(JSON.stringify(draft)))

Answer 2

Immer 7+ 已current()为此目的。所以，你可以这样做：

import { current } from 'immer';

console.log(current(draft));

官方文档和测试

Answer 3

事实证明，您只需要深入研究 chrome 开发工具——例如，如果您正在使用调试器，那么在右侧面板上您可以单击进入Scope -> Local -> searchTarget -> [[Target]] -> base/draft，您可以在其中查看实际值。