javascript - METEOR REACT SEARCH 和 DISPLAY 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

看起来您需要将 map 包装在像这样的包装器中

 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>
    )
  }

因为map返回数组，但你只能返回单个组件，而不是数组。