Question

我有一个搜索框，用onSubmit（）上的JSON对象更新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>
    );
  }

ReactJS输出不会呈现为HTML，但在控制台日志中有效

2 个答案: