Question

我是一个刚起步的开发人员，我正在尝试在React中设计一个SPA，该SPA使用YouTube API来检索数据。使用该数据，它可以跟踪用户是否观看了视频。我通过使用一些简单的数学计算观看的百分比来完成此操作，该数学每隔五秒钟使用setInterval更新一次。我将所有这些与npm软件包“ react-youtube”结合使用。

在组件内部，我有一个名为generatePercent（）的函数，该函数根据react-youtube文档获取事件数据，并生成百分比，当用户点击视频播放时触发该百分比。不幸的是，当用户点击暂停时，我无法清除此间隔。更糟糕的是，该应用程序似乎也正在生成setInterval的多个实例。

我已经尝试了一切，从将其放置在ComponentDidMount / ComponentWillUnmount到使用跟踪应用程序状态内的播放器状态以及使用if / else语句说电影已暂停然后清除间隔的一切方法。我已经查看了reactjs.org上的大量示例以及该站点上的其他类似问题，但没有任何效果。我可能只是没有注意到一些简单的事情，但是我真的很茫然。许多问题似乎源于我必须根据youtube-react文档使用event.target.the-i-want属性的事实，这给我带来了一些麻烦否则检索它。任何帮助将非常非常感谢。

i_1 = randsample(sz, n_1 * perm, true);

我只希望setInterval在用户点击播放时生成百分比，并在用户点击暂停时暂停生成。现在，setInterval不会暂停，它会创建setInterval的多个实例。

Answer 1

如果只需要一个间隔，则可能需要将其设置为组件上的实例属性，而不是将其放入render方法的函数中。您的渲染方法将在您的组件获取新道具或更新其状态时运行。

例如

STR_TO_DATE

我建议将其设置为实例属性，而不是将其设置为您的状态，因为这类事情往往会导致不必要的渲染。

我可能还会建议您将函数作为类方法抛出。基本上避免在渲染内部定义东西，而不需要在渲染之间可用。

例如参见here如何定义class Player extends Component { interval = null; render() { // reuse and clear the same interval as this.interval here } }和handleFormSubmit方法？

希望能为您指明正确的方向。

Answer 2

您需要将间隔存储在generatePercent函数之外的某个位置。一旦该函数完成运行，该函数中声明的所有变量将无法访问。当您第二次运行该函数时，该getPercentage变量将为null。您可以像这样将间隔存储在组件状态：

constructor() {
   super();
   this.state = {
      myInterval: null,
   };
}

您的generatePercent函数将如下所示：

generatePercent() {
  // Fetch the interval from the state
  let { myInterval, isPlaying } = this.state;

  if (!isPlaying) {
    // If the video has stopped, clear the interval
    clearInterval(myInterval);
    // Delete the reference or the (!myInterval) check below will still return false
    myInterval = null;
  } else if(!myInterval) {
    // Create an interval
    myInterval = setInterval(() => this.handleInterval(), 1000);
  }

  // Save the interval into the component state
  this.setState({myInterval});
}

使用工作正常的JSFiddle here。

处理react-youtube包时，setInterval在React.js中无法正确清除

2 个答案: