我正在使用Jumpsuit构建一个webapp,并且我注意到一个奇怪的错误。通常导致在React中将错误打印到控制台的事情不会这样做,除非我特意将该代码放在try catch块中。
例如,在一个组件的render方法中,我有这个:
render () {
return (
<div>
...
<div>{this.loadQuestionDropdowns()}</div>
}
</div>
);
}
并在loadQuestionDropdowns()
我有这个回归来测试它:
{
...
return <Potato />
}
现在,马铃薯不是一个实际的组成部分,也不是我导入的任何东西。通常,如果你试试这个,控制台会显示一个引用错误,说“马铃薯”#39;没有定义。但是,它只是崩溃应用程序,并没有任何东西显示在控制台中。如果我将它包装在try catch块中:
try {return (<Potato />);}
catch (e) {console.log(e);}
然后打印错误:
ReferenceError: Potato is not defined
at Object.loadQuestionDropdowns (transformData.js:19)
at Object.render (transformData.js:19)
at p._renderValidatedComponentWithoutOwnerOrContext (InterceptorManager.js:52)
at p._renderValidatedComponent (InterceptorManager.js:52)
at p._updateRenderedComponent (InterceptorManager.js:52)
at p._performComponentUpdate (InterceptorManager.js:52)
at p.updateComponent (InterceptorManager.js:52)
at p.receiveComponent (InterceptorManager.js:52)
at Object.receiveComponent (createError.js:16)
然后应用程序继续运行。我也在其他一些场景中注意到了这种行为。我之前用React,Redux和Jumpsuit制作了东西,并且没有遇到过这种情况。我查了一下,似乎Promises是可以默默地吞下错误的东西,但我不会在我自己的代码中使用任何Promise,当我通过Jumpsuit进行状态更新时,我总是捕获/抛出错误。我的NODE_ENV =开发和构建我只使用Jumpsuit内置的构建脚本jumpsuit build
。我看了一篇帖子,说这是他们的webpack配置的问题,但我不使用webpack,我的package.json设置是:
{
...
"scripts": {
"build": "jumpsuit build && babel server --out-dir dist/server"
},
"dependencies": {
...
},
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": [
"transform-object-rest-spread"
]
},
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-plugin-transform-object-rest-spread": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-2": "^6.22.0"
}
}
关于为什么会发生这种行为的任何想法都在发生?
答案 0 :(得分:1)
似乎已经在内部问题跟踪器上提出了这个问题: https://github.com/jumpsuit/jumpsuit/issues/3
虽然它似乎没有直接在他们的回复中解决它。这在其他redux / react库中也很明显,即redux-saga
。
例如:https://github.com/redux-saga/redux-saga/issues/632 - 虽然它不完全相同,但它是相关的。
我建议在webpackbin(他们在项目中使用的演示网站)上聚集一个最小的例子并提交一个问题(或者更好的是,PR来修复它)。