Question

我正在构建一个非常简单的博客应用程序，前端使用React，后端使用Rails。我无法弄清楚如何处理这个错误：

 Uncaught Error: Posts.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我有两个反应组件，邮政和邮政。两者都非常简单。这是帖子：

var Posts = React.createClass({ 
    getInitialState: function(){
        return { 
            posts: this.props.posts
        }
    },
    render: function(){ 
            var that = this; 
            var postBoard = this.state.posts.map(function(post){
                return (
                <Post post={post} key={post.id} />
                );
            });
        return (
            { postBoard }
        );
    }
});

这是帖子：

var Post = React.createClass({
    getInitialState: function(){
        return {
            post: this.props.post
        }
    },
    render: function(){
        return (
            <div class="col-md-12">
                <h3>{this.state.post.title}</h3>
                <p>{this.state.post.content}</p>
            </div>
        ); 
    }
});

以下是帖子的Rails索引视图。我正在使用react-rails gem：

 <div class="container-fluid">
 <div class="row">
  <div class="col-md-6 col-md-push-3">
    <h1>Posts</h1>
    <%= react_component( "Posts", { posts: @posts }) %> 
    <br>
    <%= link_to 'New Post', new_post_path %>
  </div>
</div>
</div>

以下是我的帖子控制器中的索引操作：

 def index
    @posts = Post.all
 end

我无法弄清楚造成这种情况的原因。我使用React已经有几周了。我显然生锈了。救命啊！

Answer 1

在div中包裹postBoard。错误的原因是返回方法只返回一个元素。在你的情况下postBoard是数组。如果div数组的长度等于1，它应该可以在return ( <div> { postBoard } </div> );元素

中包含它

{{1}}

React / Rails错误 - 必须返回有效的React元素（或null）

1 个答案: