如何实时自动刷新数据,做出反应? [英] How to auto refresh data in real time, react?

查看:35
本文介绍了如何实时自动刷新数据,做出反应?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

第一次使用 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屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆