ReactJS輸出不會渲染到HTML，但在控制檯日誌中工作

Question

我有一個搜索框，用一個JSON對象onSubmit（）更新this.state.chebi_results。除了當我嘗試將輸出呈現爲HTML時，一切似乎都奏效。我試圖將我的輸出呈現爲無序列表。我的控制檯日誌顯示我想要的。爲什麼HTML不被更新？

chebiResults=()=>{ 
    return(
     <div className='search_results'> 
     <ul> 
     {this.state.chebi_results.forEach((element)=>{ 
      <li>{element.name}</li> 
      console.log(element.name) 
     })} 
     </ul> 
     </div> 
    ); 
    } 

    render(){ 
    return (
     <div className='ontology_tool'> 
     <div className='wraper'> 
     <div className='search'> 
      <div className='search_tool'> 
      <form onSubmit={this.handleSearch}> 
       <input type="text" name="query" value={this.state.form_query} onChange={this.setQuery}/> 
       <input type="Submit" value="Submit" /> 
      </form> 
      </div> 
      {this.chebiResults()} 
     </div> 
     <div className='selected'> 
     </div> 
     </div> 
     </div> 
    ); 
    } 

Answer 1

Array#forEach不返回任何東西。替換您的功能Array#map。

this.state.chebi_results.map((element) => { ... }); 

Answer 2

您應該使用map不forEach。

chebiResults=()=>{ 
    return(
     <div className='search_results'> 
     <ul> 
     {this.state.chebi_results.map((element)=>{ 
      console.log(element.name); 
      return <li>{element.name}</li>; 
     })} 
     </ul> 
     </div> 
    ); 
    }