高阶组件：React.createElement：类型无效

Question

I have a component someComponent , and a function withMoreStuff takes in a class, returns a class. I have checked all my import/exports, no issue with any default or named export.

error: 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;

The error returned from this file is saying the wrappedComponent is not a valid class.

If I move the line const wrappedComponent = withMoreStuff(someComponent); into the render method it would render properly:

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

WHY???

Answer 1

I believe you are not receiving any props and your renderRows method is not returning anything, check if this solves it :

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