コンポーネントがレンダリング関数から呼び出された関数をレンダリングしない

Question

renderFilteredListがこれらのリストアイテムをレンダリングしない理由を理解しようとしています（両方ともthis.props.searchedWordという部分文字列を含み、コンソールログがtrue、renderFilteredList元のレンダリング関数から呼び出されます）。

{<li key={singleObject.body} className="list-group-item">{singleObject.body}</li>} 
{<li key={singleObject.name} className="list-group-item">{singleObject.name}</li>} 

と私は理由を見つけ出すことができなかった、誰もが私のコードが間違っているものを私にしてください伝えることができますか？

renderFilteredList(){ 
    console.log('the data to fetch is: ', this.props.dataFetched, 'and the searchedWord is: ', this.props.searchedWord); 
    return this.props.dataFetched.map(objects=>{ 
      return objects.map(singleObject=>{ 
       console.log(singleObject.body.includes(this.props.searchedWord), singleObject.name.includes(this.props.searchedWord)); 
      <div> 
       {<li key={singleObject.body} className="list-group-item">{singleObject.body}</li>} 
       {<li key={singleObject.name} className="list-group-item">{singleObject.name}</li>} 
       <hr/> 
      </div> 
      }) 
    }) 

Answer 1

マップ機能内で<div>を返す必要があります。今すぐあなたは何も返さない。

私は、あなたがレンダリングメソッドを返したときにこのメソッドを呼び出すと仮定しています。単純に呼び出してもレンダリングから何も返さない場合は、ディスプレイに何も表示されません。

renderFilteredList(){ 
    console.log('the data to fetch is: ', this.props.dataFetched, 'and the searchedWord is: ', this.props.searchedWord); 
    return this.props.dataFetched.map(objects => { 
    return objects.map(singleObject => { 
     console.log(singleObject.body.includes(this.props.searchedWord), singleObject.name.includes(this.props.searchedWord)); 
     return (
     <div> 
      {<li key={singleObject.body} className="list-group-item">{singleObject.body}</li>} 
      {<li key={singleObject.name} className="list-group-item">{singleObject.name}</li>} 
      <hr/> 
     </div> 
    ); 
    }); 
    }); 
}