METEOR ВЗАИМОДЕЙСТВУЕТ Поиск и отображение 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> 
     ) 
     }) 
    ) 
    } 

это ошибка th на потребности быть решить

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

Поскольку карта возвращения массива, но вы можете вернуть только один компонент, а не массив.