未捕获错误：不变违规：元素类型无效：预期为字符串 [英] Uncaught Error: Invariant Violation: Element type is invalid: expected a string
问题描述
- 我正在尝试调试我的反应代码。
- 在我的渲染方法中我尝试放置调试器和调试器。
- 在我跳过retun方法之后，它转到warning.js。
- 在我跳过warning.js之后，如果条件转到instantiateReactComponent.js
- 我不确定为什么它会转到不同的文件。你能不能告诉我它为什么要进入不同的文件。
- 不确定如何调试。
- 如果你们给我一些解释，那会很棒因此，以后我可以修复错误我的自我
-
提供代码片段，每次进入函数调用的步骤
- i am trying to debug my react code.
- in my render method I try to put debugger and debugger.
- after I step over retun method its going to warning.js.
- after I step over warning.js if conditions its going to instantiateReactComponent.js
- I am not sure why its going to different files. can you tell me why its going to different files.
- not sure how to debug.
- it would be great if you guys give me some explaination so that in future I can fix the error my self
providing the snippet of the code where it goes in step over function call each time
错误
invariant.js？f23e：39未捕获错误：不变违规：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）但是得到：未定义。检查 sports-container 的渲染方法。
render（）{
const {sportsType，sportsDevice ，sportsWordings，id} = this.props;
让sportsEvent = true;
render() { const { sportsType, sportsDevice, sportsWordings, id } = this.props; let sportsEvent = true;
debugger;
if (sportsEvent === true) {
return (
warning.js
warning.js
/ **
*与不变量类似，但只记录警告条件不满足。
*这可用于在关键的
*路径中记录开发环境中的问题。删除生产环境的日志代码将保持
*相同的逻辑并遵循相同的条件代码路径。
* /
/** * Similar to invariant but only logs a warning if the condition is not met. * This can be used to log issues in development environments in critical * paths. Removing the logging code for production environments will keep the * same logic and follow the same code paths. */
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
* /
/** * Given a ReactNode, create an instance that will actually be mounted. * * @param {ReactNode} node * @return {object} A new instance of the element's constructor. * @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. I.e. 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），即
Check your import / require statements in your file, as well as the export for the components you're importing/requiring. When I get errors like this, it's usually because I'm either importing it incorrectly (ES6), i.e.
import MyComponent from './my-component'
而不是
import { MyComponent } from './my-component'
或者我错误地导出了它（忘记导出默认值，或者在我不想要的时候导出默认值），或者我忘记完全导出组件。
or maybe I've exported it incorrectly (forgetting to export default, or maybe exporting as default when I didn't mean to), or I forgot to export the component entirely.
这篇关于未捕获错误：不变违规：元素类型无效：预期为字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
