为什么我的函数被无限调用？ （反应天然/博览会）

Question

我有一个视频播放列表，当每个视频结束时，我想播放下一个视频。到目前为止，我想出了如何播放下一个视频，但是方法this.playnext（）被无限调用，任何想法我做错了什么？

这是我的代码，当视频结束时，this.playnext（）被无限调用。关于如何解决这个问题的任何想法？

import React, { Component } from 'react';
import { Video } from 'expo';
let styles = require('../stylesheet.js');


export default class Player extends Component {
  constructor(props){
    super(props);
    this.state = {
      playlist: [
        {src:require('../assets/videos/asthma-1.mp4'),name:'asthma-1'}, 
        {src:require('../assets/videos/asthma-2.mp4'),name:'asthma-2'},
        {src:require('../assets/videos/asthma-3.mp4'),name:'asthma-3'},
        {src:require('../assets/videos/copd-1.mp4'),name:'copd-1'}, 
        {src:require('../assets/videos/copd-2.mp4'),name:'copd-2'},
        {src:require('../assets/videos/copd-3.mp4'),name:'copd-3'},
        {src:require('../assets/videos/diabetes-1.mp4'),name:'diabetes-1'}, 
        {src:require('../assets/videos/diabetes-2.mp4'),name:'diabetes-2'},
        {src:require('../assets/videos/diabetes-3.mp4'),name:'diabetes-3'},
        {src:require('../assets/videos/emphysema-1.mp4'),name:'emphysema-1'}, 
        {src:require('../assets/videos/emphysema-2.mp4'),name:'emphysema-2'},
        {src:require('../assets/videos/emphysema-3.mp4'),name:'emphysema-3'},
        {src:require('../assets/videos/hyperlipidemia-1.mp4'),name:'hyperlipidemia-1'}, 
        {src:require('../assets/videos/hyperlipidemia-2.mp4'),name:'hyperlipidemia-2'},
        {src:require('../assets/videos/hyperlipidemia-3.mp4'),name:'hyperlipidemia-3'},
        {src:require('../assets/videos/hypertension-1.mp4'),name:'hypertension-1'}, 
        {src:require('../assets/videos/hypertension-2.mp4'),name:'hypertension-2'},
        {src:require('../assets/videos/hypertension-3.mp4'),name:'hypertension-3'},
        {src:require('../assets/videos/narcolepsy-1.mp4'),name:'narcolepsy-1'}, 
        {src:require('../assets/videos/narcolepsy-2.mp4'),name:'narcolepsy-2'},
        {src:require('../assets/videos/narcolepsy-3.mp4'),name:'narcolepsy-3'},
        {src:require('../assets/videos/pneumonia-1.mp4'),name:'pneumonia-1'}, 
        {src:require('../assets/videos/pneumonia-2.mp4'),name:'pneumonia-2'},
        {src:require('../assets/videos/pneumonia-3.mp4'),name:'pneumonia-3'}
      ]
    }
  }
  componentDidMount(){
    alert('turnip')
  }

  componentWillReceiveProps(nP){
      let newvideo = nP.video;
      let playlist = this.state.playlist;
      let nextsrc;
      let indexofnewvid;
      for(let i = 0; i <= playlist.length - 1; i++){
        if(playlist[i].name.includes(newvideo)){
          nextsrc = playlist[i];
          indexofnewvid = i;
          break;
        }
      }
      for(let i = 0; i <= indexofnewvid - 1; i++){
        let temp = playlist[0];
        playlist.shift();
        playlist.push(temp);
      }
      this.setState({playlist,})
  }
  componentWillUpdate(prevState, nextState){
    console.log(nextState);
  }
  callern(playbackStatus){
    if(playbackStatus['didJustFinish']){
      console.log('ended');
      this.playnext();
    }else{
      console.log('playing paused or loading');
    }
  }
  playnext(){
    console.log("playing next");
    let playlist = this.state.playlist;
    let temp = playlist[0];
    playlist.shift();
    playlist.push(temp);
    this.setState({playlist,})
  }
  render(){
    return(
     <Video

      onPlaybackStatusUpdate={(playbackStatus)=> this.callern(playbackStatus)}
      source={this.state.playlist[0].src}
      posterSource={require('../assets/images/Signal_Logo.png')}
      rate={1.0}
      volume={1.0}
      muted={false}
      useNativeControls
      resizeMode="cover"
      style={styles.player} />
      )
  }
}

Answer 1

The documentation 说

  只要对此onPlaybackStatusUpdate的API调用完成，就会调用

playbackObject，并且在媒体处于加载状态时也会定期调用

You probably want to take advantage of didJustFinish

  

一个布尔值，描述媒体在收到此状态时是否刚刚播放完毕。当媒体播放完成时，setOnPlaybackStatusUpdate()中传递的函数仅在didJustFinish设置为true时调用一次。 <{1}}在任何其他情况下都不会didJustFinish。