Uncaught Error: Invariant Violation: Elementtyp ist ungültig: erwartet eine Zeichenfolge

Question

• Ich versuche, meinen Code zu debuggen.
• In meiner Rendermethode versuche ich Debugger und Debugger zu setzen.
• nachdem ich über die Methode zurückgehen gehe es zu warning.js.
• nachdem ich über warning.js gegangen bin, wenn Bedingungen zu instantiateReactComponent.js gehen
• Ich bin nicht sicher, warum es zu anderen Dateien geht. Kannst du mir sagen, warum es zu verschiedenen Dateien geht?
• nicht sicher, wie zu debuggen.
• wäre es toll, wenn ihr mir etwas explaination geben, so dass ich in Zukunft meines selbst den Fehler beheben kann

• das Snippet des Codes bereitstellt, wo sie über Funktionsaufruf jedes Mal

  Fehler in Schritt gehen invariant.js? F23e: 39 Uncaught Error: Invariant Violation: Elementtyp ist ungültig: erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten), aber erhalten: undefiniert. Überprüfen Sie die Rendermethode sports-container.

  render() { Const {Sportart, Sportgerät, SportWörter, ID} = this.props; lassen sportsEvent = wahr;

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

  warning.js

/** * Ähnlich invariant aber meldet sich nur eine Warnung, wenn die Bedingung nicht erfüllt ist. * Dies kann verwendet werden, um Probleme in Entwicklungsumgebungen in kritischen * Pfaden zu protokollieren. Wenn Sie den Protokollierungscode für Produktionsumgebungen entfernen, wird die * Logik beibehalten und den gleichen Codepfaden folgen. */

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); 

/** * a ReactNode Gegeben eine Instanz erstellen, die tatsächlich montiert werden. * * @param {ReactNode} -Knoten * @return {Objekt} Eine neue Instanz des Konstruktors des Elements. * @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); 

Answer 1

Prüfen Sie die Import/require-Anweisungen in der Datei sowie den Export für die Komponenten, die Sie importieren/erfordern. Wenn ich Fehler wie diese zu erhalten, ist es in der Regel, weil ich entweder bin es falsch (ES6) importieren, dh

import MyComponent from './my-component' 

statt

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

oder vielleicht habe ich es falsch exportiert (Vergessen Export Standard, oder vielleicht als Standard exportieren, wenn ich nicht wollte), oder ich habe vergessen, die Komponente vollständig zu exportieren.