反应渲染数组答案

【问题标题】：React render array反应渲染数组
【发布时间】：2017-12-13 14:04:08
【问题描述】：

import React from 'react';

//扩展从'axios'导入axios；

导出默认类 Player 扩展 React.Component {

constructor(){
    super();
    this.state = {
        video:this.vidTitle
    }
}

pid; //playlist ID
vidTitle = []; // Video Title
vidUrl;

componentDidMount(){
    this.getPID();
}

//Get playlist id
getPID(){
    let chanelName = "PiuChePuoiVideo"
    let url = "https://www.googleapis.com/youtube/v3/channels"
    axios.get(url, {
        params: {
            part:'contentDetails',
            forUsername: chanelName,
            key:'AIzaSyDZElwYmtCyvPLJKYO7Yt87EvJcOkyMTDg'
        }
    })
    .then(res => {
        this.pid = res.data.items[0].contentDetails.relatedPlaylists.uploads;
        console.log(this.pid)
        this.getVideoList();
    })
    .catch(err => {
        console.log(err);
  });
}

getVideoList(){
    let url = "https://www.googleapis.com/youtube/v3/playlistItems"



    axios.get(url, {
        params: {
            part:'snippet',
            maxResults: 50,
            playlistId:this.pid,
            key:'AIzaSyDZElwYmtCyvPLJKYO7Yt87EvJcOkyMTDg'
        }
    })
    .then(res => {
        // this.vidTitle = res.data.items.snippet.title;
        res.data.items.forEach((element) => {
            this.vidTitle.push({
               title:element.snippet.title
            });
        });
    })
    .catch(err => {
        console.log(err);
  });
}
render(){
    console.log(this.state.video)
    return (
        <div className="container">
           <div className="row">
               <div className="col-md-3">
                    <div>
                        {this.state.video.map(function(element, i) {
                            return <p>{element.title}</p>
                     })}
                    </div>
                    <h1>test</h1>
               </div>
           </div>
    </div>
    )
}

}

伙计们，我要做的就是在 html 中呈现这个数组，我似乎无法让它工作，你能帮我吗

【问题讨论】：

标签： reactjs

【解决方案1】：

尝试将您从 map 函数返回的 HTML 包装在括号中，这在 JSFiddle (https://jsfiddle.net/xkbxz4yx/) 中有效：

var Hello = React.createClass({

  render: function() {
    return <div>Hello {this.props.items.map(item =>{
        return (<p>{item.name}</p>)
    })}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" items={[{name: 'one'}, {name: 'two'}]} />,
  document.getElementById('container')
);

【讨论】：