在React.js中追踪错误的原因

Tracking Down the Cause of an Error in React.js

本文关键字：错误 追踪 React js      更新时间：2023-09-26

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

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

在React.js上下文中，你用来追踪违规行或函数的最佳实践、技巧和技巧是什么?

第61行的值由于10247前缀似乎没有多大意义-这是真正指第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)

提前感谢您的帮助!

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

查看当前堆栈:

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

原来这是React.js中Reconciliation的一个问题。

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

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

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

this.state.countries = {
  labels: []
}
this.forceUpdate()
相关文章：