反应.createElement: type不应该是null、undefined、boolean或number.它应该是

Question

一开始我会说我知道有类似的问题，但遗憾的是我找不到任何答案。因为大部分的主题都是关于getInitialState的问题我在这里挣扎，试图从数组中获取数据的视图有id,name and surname.似乎它几乎可以在错误部分工作，它不会渲染它我在控制台得到的错误描述:

React.createElement: type should not be null, undefined, boolean, or number. 
It should be a string (for DOM elements) or a ReactClass (for composite components). 
Check the render method of `Reapeter`.

它是否与它被指定为。tostring()有关?什么的。老实说，我不知道，我是一个反应新手。

var Reapeter = React.createClass({
render: function(){
    var foreach = this.props.data.map(function(HeaderMiniComment){
        return(
            <HeaderMiniComment name={HeaderMiniComment.name} surname={HeaderMiniComment.surname} key={HeaderMiniComment.id}/>
        )
    });
    return(
        <div>
            {foreach}
        </div>
    );
}
});

@Edit如果缺少信息，请告诉我。我会尽量带更多的@_ @

@the HeaderMiniComment

var HeaderMiniComment = React.createClass({
render:function(){
    return(
        <div>
            <span><p>{this.props.name}</p></span>
            <br />
            <span style={{color:'red'}}><p>{this.props.surname}</p></span>
        </div>
    )
}
});

Answer 1

对于我来说，您应该在props.data中只保留HeaderMiniComment的数据，并实现此处的映射(HeaderMiniComment是外部组件)

var foreach = this.props.data.map(function(item){
    return(
        <HeaderMiniComment name={item.name} surname={item.surname} key={item.id}/>
    )
});
var HeaderMiniComment = React.createClass({
render:function(){
    return(
        <div>
            <span><p>{this.props.name}</p></span>
            <br />
            <span style={{color:'red'}}><p>{this.props.surname}</p></span>
        </div>
    )
}
});
data = [{id: 1, name: 'John', surname: 'Kennedy'}, {...}, ...];