沒有渲染數據通過道具

Question

我通過將數據從一個組件傳遞到另一個組件來解決數據渲染問題。我正確地從一個部件的數據顯示到另一個但當時我不能夠提取數據正確

根組件

<SelectContainer type={3} data={this.props.templates}/> 

輔元件

import React from 'react'; 
const SelectContainer = ({type, data}) => { 
let option = []; 

if (type === 1) { 
    option.push(<option value="#" key={0}>Grant</option>)    
}else if (type === 2) { 
    option.push(<option value="#" key={0}>1</option>);   
    option.push(<option value="#" key={1}>2</option>); 
    option.push(<option value="#"key={2}>3</option>);   
} 
else if (type === 3) {   
    for (let i = 0; i <= data.length; i++) { 
     // console.log(i); 
     option.push(<option key={i+1} value={data.descTemplate}> 
      {data.descTemplate}</option>);     
    } 
} 
return (
    <select className="selectContainer"> 
     {option.map((item) => { 
      console.log(item) 
      return item 
     })} 
    </select> 
); 
} 

export default SelectContainer; 

的IMG演出的console.log在return（）

select元素不呈現我發送給父代的屬性的數據零件。 console.log打印我什麼，我在圖像中顯示，而不是數據

Answer 1

我沒有發現任何錯誤。它工作正常。位修改的摘錄：

const SelectContainer = ({type, data}) => { 
 
    let option = []; 
 
    for (let i = 0; i < data.length; i++) { 
 
    option.push(<option key={i+1} value={i+1}>{data[i].desc}</option>)    
 
    } 
 

 
    return (
 
     <select className="selectContainer"> 
 
      {option.map((item) => { 
 
       return item; 
 
      })} 
 
     </select> 
 
); 
 
} 
 

 
const templates = [ 
 
    { 
 
     desc: 1 
 
    }, 
 
    { 
 
     desc: 2 
 
    }, 
 
    { 
 
     desc: 3 
 
    } 
 
] 
 
ReactDOM.render(
 
    <SelectContainer type={3} data={templates}/>, 
 
    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>

我認爲他們是出錯了data.descTemplate，