没有使用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;

在return（）的img show console.log

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 出了问题。