Html 从给定数组中选择选项未显示

编程问答 2022-05-02

问题描述

我正在开发 React 应用程序。我有多个选择标签和不同的选项要显示，我编写了一个接收选项并返回整个选择标签的函数。我从 render() 方法多次调用这个函数。我想重用代码。由于某些原因，选择的选项没有显示。

我的代码是这样的：

displayMenu = (id,options) => {

let menu = <div className="model"> Model 
                 <select id={id}>
                   {
                     this.options.map( (item,index) => {
                       <option value={index}>{item}</option>
                     })
                   }
                 </select>
               </div>
return menu;


}

render(){
   
   return (
      <div id="main">
           // other <p> elements here
           <Collapsible trigger="Actors">
             {this.displayMenu("FirstActor",this.props.Details["FirstActor"])}
             {this.props.Details["OtherActors"].map ( ( item,index) => 
               this.displayMenu("OtherActor" + index,item)
               )}
           </Collapsible>

         //oher <button> tags here

         </div>      


)
}

函数显示选择标签，但选项为空。我的数组很好，我检查了值。我假设原因可能是标签的 z-index 值，我试图改变它但再次没有显示任何内容。同样在浏览器控制台中显示：

<select id="FristActor model "></select> ==$0

任何想法都会有所帮助。谢谢。

解决方法

您没有从地图功能返回

<select id={id}>
   {
     this.options.map( (item,index) => {
       return <option value={index}>{item}</option>
     })
   }
 </select>
,

抱歉，由于声誉不佳，我无法发表评论。

如果您不想写回信，请更新 Kumar 的答案。

<select id={id}>
   {
     this.options.map( (item,index) => (
       <option value={index}>{item}</option>
     ))
   }
 </select>

谢谢。

htmljavascriptoptionsoptionsreactjsreactjsreactjsreactjsselectselectselect