未捕获错误:不变违规:元素类型无效:预期为字符串

  • 我正在尝试调试我的反应代码。
  • 在我的渲染方法中,我尝试放置调试器和调试器。
  • 在我跳过retun方法之后,它会转到warning.js。
  • 在我跳过warning.js之后,如果条件是instantiateReactComponent.js
  • 我不确定为什么它会转到不同的文件。 你能告诉我为什么它会转到不同的文件。
  • 不知道如何调试。
  • 如果你们给我一些解释,那将是很好的,以便将来我可以解决我自己的错误
  • 提供代码的片段,每次都在函数调用中进行

    error invariant.js?f23e:39未捕获错误:不变违规:元素类型无效:预期字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined。 检查sports-container的渲染方法。

    render(){const {sportsType,sportsDevice,sportsWordings,id} = this.props; 让sportsEvent = true;

      debugger; if (sportsEvent === true) { return ( 

    warning.js

/ ** *与不变量类似,但仅在不满足条件时才记录警告。 *这可用于记录关键*路径中的开发环境中的问题。 删除生产环境的日志记录代码将保持*相同的逻辑并遵循相同的代码路径。 * /

 var warning = emptyFunction; if (process.env.NODE_ENV !== 'production') { warning = function (condition, format) { for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { args[_key - 2] = arguments[_key]; } if (format === undefined) { throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); } if (format.indexOf('Failed Composite propType: ') === 0) { return; // Ignore CompositeComponent proptype check. } if (!condition) { var argIndex = 0; var message = 'Warning: ' + format.replace(/%s/g, function () { return args[argIndex++]; }); if (typeof console !== 'undefined') { console.error(message); } try { // --- Welcome to debugging React --- // This error was thrown as a convenience so that you can use this stack // to find the callsite that caused this warning to fire. throw new Error(message); } catch (x) {} } }; } instantiateReactComponent instance.construct(node); 

/ ** *给定一个ReactNode,创建一个实际将被挂载的实例。 * * @param {ReactNode} node * @return {object}元素构造函数的新实例。 * @protected * /

 function instantiateReactComponent(node) { var instance; if (node === null || node === false) { instance = new ReactEmptyComponent(instantiateReactComponent); } else if (typeof node === 'object') { var element = node; !(element && (typeof element.type === 'function' || typeof element.type === 'string')) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Element type is invalid: expected a string (for built-in components) ' + 'or a class/function (for composite components) but got: %s.%s', element.type == null ? element.type : typeof element.type, getDeclarationErrorAddendum(element._owner)) : invariant(false) : undefined; // Special case string values if (typeof element.type === 'string') { instance = ReactNativeComponent.createInternalComponent(element); } else if (isInternalComponentType(element.type)) { // This is temporarily available for custom components that are not string // representations. Ie ART. Once those are updated to use the string // representation, we can drop this code path. instance = new element.type(element); } else { instance = new ReactCompositeComponentWrapper(); } } else if (typeof node === 'string' || typeof node === 'number') { instance = ReactNativeComponent.createInstanceForText(node); } else { !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Encountered invalid React node of type %s', typeof node) : invariant(false) : undefined; } if (process.env.NODE_ENV !== 'production') { process.env.NODE_ENV !== 'production' ? warning(typeof instance.construct === 'function' && typeof instance.mountComponent === 'function' && typeof instance.receiveComponent === 'function' && typeof instance.unmountComponent === 'function', 'Only React Components can be mounted.') : undefined; } // Sets up the instance. This can probably just move into the constructor now. instance.construct(node); 

检查文件中的import / require语句,以及导入/要求的组件的导出。 当我得到这样的错误时,通常是因为我要么输入错误(ES6),即

 import MyComponent from './my-component' 

代替

 import { MyComponent } from './my-component' 

或者我可能错误地导出它(忘记导出默认值,或者可能导出默认情况下我默认导出),或者我忘记完全导出组件。