反应渲染数组

Posted 2023-04-14

【中文标题】反应渲染数组

【英文标题】：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 中呈现这个数组，我似乎无法让它工作，你能帮我吗

【参考方案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')
);