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