没有渲染数据通过道具

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，