如何调试ReactJS的setState函数

Question

我目前正在开发一个中等规模的ReactJS应用程序，在单击组件上的按钮后，会收到以下错误消息：

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

我该如何更轻松地调试？为什么ReactJS没有给出违反此规则的具体组件名称？

你会怎么做？

- Tim Daubenschütz

---

我会寻找使用Ajax或计时器的任何内容...可能在componentDidMount中，因为内部回调可能在组件已经卸载后执行。 - WiredPrairie

Answer 1

当提供的消息与特定模式匹配时，您可以覆盖 console.warn 使其抛出异常而不是记录日志。在您的情况下，您需要执行以下操作：

您可以覆盖 console.warn 使其在提供的消息匹配特定模式时抛出异常而不是记录日志。在您的情况下，您需要执行以下操作：

var warn = console.warn;
console.warn = function(warning) {
  if (/(setState)/.test(warning)) {
    throw new Error(warning);
  }
  warn.apply(console, arguments);
};

错误的堆栈跟踪将指向导致警告的行。

- Alexandre Kirszenberg

---

这实际上非常聪明，但出于某种原因对我不起作用。 - GrowinMan

啊，好的，我理解了 - 日志里记录的是“警告：...”，但实际上是错误日志。所以我必须用你代码片段中的“警告”替换为“错误”。 我希望我能请您喝咖啡 :) - GrowinMan

Answer 2

实际上，解决此问题的最佳方法是在本地更改一些React代码。

这个pull-request特别指出如何修改src/renderers/shared/reconciler/ReactUpdateQueue.js以获取非法设置状态的组件。

由于此pull-request已合并到存储库中，因此不久之后将被集成到React的npm版本中，人们可以期望这一点。

- Tim Daubenschütz