渲染選項中選擇失敗

Question

有什麼不對這樣

<option key={this.props.floors} value={this.props.floors.floor_id}> 
     {this.props.floors.name} 
    </option> 

這是我的數據

[{ 
    "floor_id": "1", 
    "name": "UG" 
}, { 
    "floor_id": "2", 
    "name": "G" 
}, { 
    "floor_id": "3", 
    "name": "LG" 
}] 

我沒有看到任何選項被人口我的下拉。

Answer 1

樓層是array其中包含選項的數據，以便從該array創建ui，你需要使用任何loop迭代的array，通過使用map檢查這個例子：

var floors = [{ 
 
    "floor_id": "1", 
 
    "name": "UG" 
 
}, { 
 
    "floor_id": "2", 
 
    "name": "G" 
 
}, { 
 
    "floor_id": "3", 
 
    "name": "LG" 
 
}] 
 

 
class App extends React.Component{ 
 

 
    render(){ 
 
     return <select> 
 
       { 
 
        this.props.floors.map(floor => <option key={floor.floor_id} value={floor.floor_id}> 
 
                 {floor.name} 
 
                </option>) 
 
       } 
 
      </select> 
 
    } 
 

 
} 
 

 
ReactDOM.render(<App floors = {floors}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

Answer 2

您需要映射在道具和retun選項字段像

<select> 
{ 
    this.props.floors.map((item) => { 
     return (
       <option key={item.floor_id} value={item.floor_id}> 
     {item.name} 
    </option> 
     ) 
    }) 
} 
</select> 

示例代碼段

class App extends React.Component { 
 

 
    render() { 
 
     var floors = [{ 
 
    "floor_id": "1", 
 
    "name": "UG" 
 
}, { 
 
    "floor_id": "2", 
 
    "name": "G" 
 
}, { 
 
    "floor_id": "3", 
 
    "name": "LG" 
 
}] 
 
     return (
 
     <select> 
 
      { 
 
       floors.map((item) => { 
 
        return (
 
          <option key={item.floor_id} value={item.floor_id}> 
 
        {item.name} 
 
       </option> 
 
        ) 
 
       }) 
 
      } 
 
      </select> 
 
     ) 
 

 
    } 
 

 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>