追踪 React.js 中错误的原因答案

【问题标题】：Tracking Down the Cause of an Error in React.js追踪 React.js 中错误的原因
【发布时间】：2015-10-20 23:17:57
【问题描述】：

我在 React.js 中出现了一个错误，该错误仅在非常特定的情况下发生。

当我创建错误时，一个错误会打印到 Chrome 中的 JS 控制台，但它不是特别语义化。

您使用哪些最佳实践、提示和技巧来跟踪 React.js 上下文中的违规行或函数？

由于 10247 前缀，第 61 行的值似乎没有多大意义 - 这真的是指第 61 行，还是由于源映射或其他原因造成的垃圾？

Unhandled rejection TypeError: Cannot set property 'value' of undefined
    at http://localhost:4000/js/analytics.js:10247:61
    at Array.forEach (native)
    at http://localhost:4000/js/analytics.js:10246:16
    at Array.forEach (native)
    at updatePoints (http://localhost:4000/js/analytics.js:10245:29)
    at module.exports.createClass.classData.componentWillReceiveProps (http://localhost:4000/js/analytics.js:10195:9)
    at 43.ReactCompositeComponentMixin.updateComponent (http://localhost:4000/js/vendor.js:42736:14)
    at 82.ReactPerf.measure.wrapper [as updateComponent] (http://localhost:4000/js/vendor.js:49431:21)
    at 43.ReactCompositeComponentMixin.receiveComponent (http://localhost:4000/js/vendor.js:42623:10)
    at Object.89.ReactReconciler.receiveComponent (http://localhost:4000/js/vendor.js:50301:22)
    at Object.__REACT_INSPECTOR_RUNTIME__0_13_1.React.ReactReconciler.receiveComponent (<anonymous>:118:43)
    at 43.ReactCompositeComponentMixin._updateRenderedComponent (http://localhost:4000/js/vendor.js:42865:23)
    at 43.ReactCompositeComponentMixin._performComponentUpdate (http://localhost:4000/js/vendor.js:42843:10)
    at 43.ReactCompositeComponentMixin.updateComponent (http://localhost:4000/js/vendor.js:42759:12)
    at 82.ReactPerf.measure.wrapper [as updateComponent] (http://localhost:4000/js/vendor.js:49431:21)
    at 43.ReactCompositeComponentMixin.receiveComponent (http://localhost:4000/js/vendor.js:42623:10)

提前感谢您的帮助！

【问题讨论】：

嗯，你是说第 10247 行第 61 列吗？从那大量的行中，我想你那里有一个相当大的文件，请尝试使用 sourcemaps。
@coma 我认为这包括我在 JS 中需要的所有文件。你认为使用 gulp-sourcemaps 是关键吗？

标签： javascript node.js reactjs typeerror

【解决方案1】：

是的，将您的代码拆分为单独的文件并尝试使用将调试标志设置为 true 的 browserify（或 webpack），以便将您的大文件映射到 sourcemap 并简化 Chrome 和朋友中的调试。

在这里查看我当前的堆栈：

https://github.com/coma/domno?files=1

【讨论】：

谢谢伙计。原来这是 React 和 Chart.js 的一个奇怪的库问题。无论如何，这是一个赞成票:)

【解决方案2】：

原来是 React.js 中的 Reconciliation 有问题。

React 本质上使用启发式方法来决定在更新时重新渲染什么，而 react-chartjs 库在这方面表现不佳。

更多信息可以在这里找到：https://facebook.github.io/react/docs/reconciliation.html

我使用的修复基本上是清除传递到图表的状态数据并强制更新，从而使 React 重新渲染整个元素：

this.state.countries = {
  labels: []
}

this.forceUpdate()

【讨论】：