没有通过 props 传递的渲染数据

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 show console.log at return()

select 元素不会呈现我为父组件的属性发送的数据。 console.log 打印我在图像中显示的内容，而不是数据

Answer 1

我没有发现任何问题。它工作正常。位修改sn-p：

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 有问题。