如何解决从API提取YouTube视频能够通过按钮Onclick显示,需要在页面上显示,而不是通过按钮单击直接在我的页面上显示
无法直接在reactjs中在我的网页上显示youtube视频,只能通过Onclick按钮执行此操作,但是我不需要单击任何按钮即可在页面上获取视频,我希望直接在我的视频上显示视频提取数据后的网页,请尝试通过更改代码但无法找到解决方案,我是编码方面的新手,需要对代码进行任何更改才能使视频显示在网页上而无需单击。
const finalURL = `https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=${ChannelID}&maxResults=${result}&key=${API}`
class Youtube extends Component {
constructor(props) {
super(props)
this.state = {
resultyt: []
};
this.Clicked= this.Clicked.bind(this);
}
Clicked() {
fetch (finalURL)
.then((response) => response.json())
.then((responseJson) => {
const resultyt = responseJson.items.map(obj => "https://www.youtube.com/embed/"+obj.id.videoId);
this.setState({resultyt});
})
.catch((error) => {
console.error(error);
})
}
render() {
return (
<div>
<button onClick={this.Clicked}>
My Channel Videos
</button>
{
this.state.resultyt.map((link,i) => {
var frame = <div key={i} className='Guru'><iframe width="200" height="100" src={link} frameBorder="0" allowFullScreen></iframe> </div>
return frame;
})
}
{this.frame}
</div>
)
}
}
export default Youtube
解决方法
您应该使用componentDidMount
。这里的更多信息:https://en.reactjs.org/docs/faq-ajax.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。