ReactPropTypesSecret.js:12 Uncaught Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
在做一个react项目的时候,有一个功能界面在调试状态下不报错,打包压缩后就会报如上错误,这个错误也没有明确提示错误在哪发生的,根据提示打开这个连接后https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=得到如下结果
The full text of the error you just encountered is:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
根据提示应该是某个组件在实例化的时候发生了错误,但是实在不好确认问题在哪,于是继续分析。经过代码逐行的排查,最后定位问题发生在下面代码处。
return (
<LayerListContext.Provider value={layerListContextValue}>
{currentLayerIds.map((id) => (
<SlideLayer key={id} id={id}>
{status == 'edit' ? <LayerItem /> : <LayerSimple/>}
</SlideLayer>
))}
</LayerListContext.Provider>
)
const view = currentLayerIds.map((id) => (
<SlideLayer key={id} id={id}>
{status == 'edit' ? <LayerItem /> : <LayerSimple/>}
</SlideLayer>
))
console.log(view)
通过上面的代码执行打印出执行结果发现
打印出来LayerSimple
console.log(LayerSimple)
ƒ (e){return console.log("LayerSimple",e),l}
//右键此处,选择store as a global variable创建全局变量temp2
temp2
ƒ (e){return console.log("LayerSimple",e),l}
temp2({})
{$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
上面直接调用temp2发现是可以成功创建出有type的组件实例的,最后将写法换成下面的,不再报错,到这一步已经找到问题的大致原因了,解下来就需要具体的分析底层原因。
{currentLayerIds.map((id) => (
<SlideLayer key={id} id={id}>
{status == 'edit' ? <LayerItem /> : LayerSimple({})}
</SlideLayer>
))}