如何实时自动刷新数据,做出反应? [英] How to auto refresh data in real time, react?
本文介绍了如何实时自动刷新数据,做出反应?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
第一次使用 React 制作一个基本的 Spotify 应用程序.当前,正在播放"功能正在使用按钮来显示用户正在播放的内容.如何更改此命令,使其与单击按钮实时执行?
任何帮助都会很棒:)完整代码示例如下
import React, { Component } from 'react';导入'./App.css';从 'spotify-web-api-js' 导入 Spotify;const spotifyWebApi = 新 Spotify();类 App 扩展组件 {构造函数(){极好的();const params = this.getHashParams();this.state ={登录: params.access_token ?真假,正在播放:{name: '未检查',图片: ''}}如果(params.access_token){spotifyWebApi.setAccessToken(params.access_token)}}getHashParams() {var hashParams = {};var e, r =/([^&;=]+)=?([^&;]*)/g,q = window.location.hash.substring(1);while ( e = r.exec(q)) {hashParams[e[1]] = decodeURIComponent(e[2]);}返回哈希参数;}getNowPlaying(){spotifyWebApi.getMyCurrentPlaybackState().then((响应) => {this.setState({正在播放:{名称: response.item.name,图片:response.item.album.images[1].url}})})}使成为() {返回 (<div className="应用程序"><button>登录但使用 Spotify </button></a><div>正在播放:{ this.state.nowPlaying.name} </div><div><img src={ this.state.nowPlaying.image} style={{ width: 100}}/>
<button onClick={() =>this.getNowPlaying()}>检查正在播放按钮>
解决方案
不确定实时"的确切含义,但您可以设置一个时间间隔以使用 api 检查正在播放的歌曲.
类似于:
class App 扩展组件 {//你的代码..这个.interval;componentDidMount() {this.interval = setInterval(this.getNowPlaying, 500);//<- 时间以毫秒为单位}停止间隔(){clearInterval(this.interval);}componentWillUnmount() {this.stopInterval();}}
making a basic spotify app using React for the first time. currenty the "Now playing" feature is using a button to display what is being played by the user. How can I change this command so it does it in real time as apposed to a click of a button?
<button onClick={() => this.getNowPlaying()}>
Check Now Playing
</button>
Any help would be great :) Full code example is below
import React, { Component } from 'react';
import './App.css';
import Spotify from 'spotify-web-api-js';
const spotifyWebApi = new Spotify();
class App extends Component {
constructor(){
super();
const params = this.getHashParams();
this.state ={
loggedIn: params.access_token ? true : false,
nowPlaying: {
name: 'Not Checked',
image: ''
}
}
if (params.access_token){
spotifyWebApi.setAccessToken(params.access_token)
}
}
getHashParams() {
var hashParams = {};
var e, r = /([^&;=]+)=?([^&;]*)/g,
q = window.location.hash.substring(1);
while ( e = r.exec(q)) {
hashParams[e[1]] = decodeURIComponent(e[2]);
}
return hashParams;
}
getNowPlaying(){
spotifyWebApi.getMyCurrentPlaybackState()
.then((response) => {
this.setState({
nowPlaying: {
name: response.item.name,
image: response.item.album.images[1].url
}
})
}
)
}
render() {
return (
<div className="App">
<a href='http://localhost:8888'>
<button>Login But With Spotify </button>
</a>
<div> Now Playing: { this.state.nowPlaying.name} </div>
<div>
<img src={ this.state.nowPlaying.image} style={{ width: 100}}/>
</div>
<button onClick={() => this.getNowPlaying()}>
Check Now Playing
</button>
</div>
解决方案
Not sure what you mean exactly by "real time", but you could set an interval to check using the api what song is playing.
Something like:
class App extends Component {
//your code ..
this.interval;
componentDidMount() {
this.interval = setInterval(this.getNowPlaying, 500); // <- time in ms
}
stopInterval() {
clearInterval(this.interval);
}
componentWillUnmount() {
this.stopInterval();
}
}
这篇关于如何实时自动刷新数据,做出反应?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文