2017-07-18 3 views
0

Ich habe eine Komponente someComponent, und eine Funktion withMoreStuff dauert in einer Klasse, gibt eine Klasse zurück. Ich habe alle meine Importe/Exporte überprüft, kein Problem mit irgendeinem Standard oder benanntem Export.Hohe Bestellkomponente: React.createElement: Typ ist ungültig

Fehler: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

// @flow 
import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import { withMoreStuff } from 'hocs'; 
import { someComponent } from 'components'; 

type PropsType = { 
    data: [{ id: number }], 
} 

const wrappedComponent = withMoreStuff(someComponent); 

class ItemList extends Component { 
    props: PropsType; 

    renderRows(data: any) { 
    return data.map(item => 
     <wrappedComponent key={item.id} data={item} /> 
    ); 
    } 

    render() { 

    return (
     <div> 
     {this.renderRows(this.props.data)} 
     </div> 
    ); 
    } 
}; 

export default ItemList; 

Der Fehler aus dieser Datei zurückgegeben wird, sagen die wrappedComponent keine gültige Klasse ist.

Wenn ich die Zeile const wrappedComponent = withMoreStuff(someComponent); in die Render-Methode bewegen würde es machen richtig:

render() { 
    const wrappedComponent = withMoreStuff(someComponent); 
    return (
     <div> 
     {this.renderRows(this.props.data)} 
     </div> 
    ); 
} 

WARUM ???

+0

Deklarieren 'wrappedComponent' in machen keinen Sinn machen, da Sie verwenden es in 'renderRows'. – Valentin

Antwort

0

Ich glaube, Sie keine Requisiten erhalten und Ihre renderRows Methode nichts zurückgibt, ob dies löst es:

renderRows(data: any) { 
    if(!data) return </div>; 
    return data.map(item => 
     <wrappedComponent key={item.id} data={item} /> 
    ); 
} 
Verwandte Themen