Meteor React搜索和显示Onchange用户输入需要帮助解决错误

Question

这是输入代码：

Title: <input type="text" ref="searchTitle" onChange={this.searchTitle}/>

这是Onchange事件处理程序：

searchTitle(event) {
    this.setState({
      show_article_editable_list: <Article_Editable_List articleTitle={event.target.value}/>,
    });
  }

这是以前代码中具有事件值的订阅方法：

export default createContainer( (props) => {
  const articleTitle = props.articleTitle;
  Meteor.subscribe('search_results', articleTitle);
  return { articles: Articles.find({}).fetch() };
}, Article_Editable_List);

这是从订阅中获取参数的发布方法：

Meteor.publish('search_results', function (articleTitle) {
    if(articleTitle) {
      return Articles.find({articleTitle});
    }
  });

这是带有索引的收集代码：

export const Articles = new Mongo.Collection('articles');
if(Meteor.isServer) {
  Articles._ensureIndex({
    articleTitle: "text",
  });
}

这是显示搜索结果的地方：

render() {
    return (
      this.props.articles.map( (article) => {
        const dateCreated = article.createdAt.toString();
        const dateUpdated = article.updatedAt.toString();
        return (
          <div key={article._id} className="article_list_editable">
            <h1>{article.articleTitle}</h1>
            <br/>
            <h1>{article.articleAuthor}</h1>
            <div>{dateCreated}</div>
            <div>{dateUpdated}</div>
            <div>{article.articleType}</div>
          </div>
        )
      })
    )
  }

这是需要解决的错误

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

Answer 1

看起来您需要将映射包装在某些包装器中，例如

 render() {
        return (
          <div>{
            this.props.articles.map( (article) => {
            const dateCreated = article.createdAt.toString();
            const dateUpdated = article.updatedAt.toString();
            return (
              <div key={article._id} className="article_list_editable">
                <h1>{article.articleTitle}</h1>
                <br/>
                <h1>{article.articleAuthor}</h1>
                <div>{dateCreated}</div>
                <div>{dateUpdated}</div>
                <div>{article.articleType}</div>
              </div>
            )
          }
        )
      }</div>
    )
  }

因为地图返回数组，但是您只能返回单个组件，而不是数组。