如何实时自动刷新数据，反应？

Posted 2023-04-15

【中文标题】如何实时自动刷新数据，反应？

【英文标题】：How to auto refresh data in real time, react?

【发布时间】：2020-06-16 08:05:33

【问题描述】：

第一次使用 React 制作一个基本的 spotify 应用程序。目前，“正在播放”功能正在使用按钮来显示用户正在播放的内容。如何更改此命令，使其与单击按钮一样实时执行？

<button onClick=() => this.getNowPlaying()>
   Check Now Playing
 </button>

任何帮助都会很棒:) 完整的代码示例如下

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>

【参考方案1】：

不确定您所说的“实时”到底是什么意思，但您可以设置一个间隔来使用 api 检查正在播放的歌曲。

类似：

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();

【参考方案2】：

你可以添加

componentDidMount()
   this.interval = setInterval(() => 
      // Spotify API for getting current 
      // setState if the song has changed
   , 500);

componentWillUnmount() 
    clearInterval(this.interval);
  

我个人不是这种方法的忠实拥护者。但这是一个开始。