鍍金池/ 問答/HTML/ react中銷毀報(bào)錯(cuò):調(diào)用已卸載組件上的setstate?

react中銷毀報(bào)錯(cuò):調(diào)用已卸載組件上的setstate?

在我從一個(gè)頁(yè)面點(diǎn)擊跳轉(zhuǎn)到另一個(gè)頁(yè)面,就開始一直出現(xiàn)這個(gè)錯(cuò)誤

setState(…):只能更新已安裝或安裝的組件。這通常意味著您調(diào)用卸載組件上的setState()。這是一個(gè)空操作。請(qǐng)檢查Player組件的代碼。
圖片描述

Player.js代碼

import React from 'react'
import Progress from '../components/progress'
import './player.less'
import { Link } from 'react-router'
import PubSub from 'pubsub-js'

//音頻總時(shí)長(zhǎng)
let duration = null;

let Player = React.createClass({

// 設(shè)置初始數(shù)據(jù)
getInitialState() {
    return {
        progress: 0,
        volume: 0,
        isPlay: true,
        leftTime: ''
    }
},
/**
 * 事件發(fā)布
 */
playPrev() {
    PubSub.publish('PLAY_PREV');
},
playNext() {
    PubSub.publish('PLAY_NEXT');
},
//時(shí)間格式化
formatTime(time) {
    time = Math.floor(time);
    let minutes = Math.floor(time / 60);
    let seconds = Math.floor(time % 60);

    // seconds =seconds < 10 ? `0${seconds}` : seconds;
    // return `${minutes}:${seconds}`;
    return minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
},
componentDidMount() {
    // 監(jiān)聽音樂播放時(shí)間
    $('#player').bind($.jPlayer.event.timeupdate, (e) => {
        //音頻總時(shí)長(zhǎng)
        duration = e.jPlayer.status.duration;
        //回調(diào)函數(shù),將音樂播放時(shí)間傳回progress
        this.setState({
            volume: e.jPlayer.options.volume * 100,      //音量
            progress: e.jPlayer.status.currentPercentAbsolute,   //播放時(shí)間百分比
            leftTime: this.formatTime(duration * (1 - e.jPlayer.status.currentPercentAbsolute / 100))
        });
    });
},
//解綁
componentWillUnMount() {
    $('#Player').unbind($.jPlayer.event.timeupdate);
},
progressChangeHandler(progress) {
    //調(diào)用jPlayer的方法,更改播放時(shí)間
    // this.state.isPlay ? 'play' : 'pause'
    $('#player').jPlayer("play",duration * progress);

    this.setState({
        isPlay: true
    });
},
//音量調(diào)節(jié)
changeVolumeHandler(progress) {
    $('#player').jPlayer('volume',progress);

    // this.setState({
    //     volume: progress * 100,
    // });
},
//播放和暫停
play() {
    if(this.state.isPlay) {
        $('#player').jPlayer('pause');
    } else {
        $('#player').jPlayer('play');
    }

    this.setState({
        isPlay: !this.state.isPlay
    });
},
render() {
    return (
            //html代碼
        );
} 

});

路由設(shè)置代碼
let Root = React.createClass({

render() {
    return (
    <Router history={hashHistory}>
        {/* 根據(jù)路徑選擇所要渲染的組件 */}
        <Route path="/" component={App}>
            <IndexRoute component={Player}></IndexRoute>
            <Route path="/list" component={MusicList}></Route>
            <Route path="/detail" component={MusicDetail}></Route>
        </Route>
    </Router>
    );
}

});

回答
編輯回答
故人嘆

你沒有解綁成功,應(yīng)該給函數(shù)設(shè)置一個(gè)引用,然后unbind的時(shí)候要傳入這個(gè)引用作為第二個(gè)參數(shù)

// 設(shè)置初始數(shù)據(jù)
getInitialState() {
    return {
        progress: 0,
        volume: 0,
        isPlay: true,
        leftTime: ''
    }
},
/**
 * 事件發(fā)布
 */
playPrev() {
    PubSub.publish('PLAY_PREV');
},
playNext() {
    PubSub.publish('PLAY_NEXT');
},
//時(shí)間格式化
formatTime(time) {
    time = Math.floor(time);
    let minutes = Math.floor(time / 60);
    let seconds = Math.floor(time % 60);

    // seconds =seconds < 10 ? `0${seconds}` : seconds;
    // return `${minutes}:${seconds}`;
    return minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
},
jPEvent = (e) => {
        //音頻總時(shí)長(zhǎng)
        duration = e.jPlayer.status.duration;
        //回調(diào)函數(shù),將音樂播放時(shí)間傳回progress
        this.setState({
            volume: e.jPlayer.options.volume * 100,      //音量
            progress: e.jPlayer.status.currentPercentAbsolute,   //播放時(shí)間百分比
            leftTime: this.formatTime(duration * (1 - e.jPlayer.status.currentPercentAbsolute / 100))
        });
    }
componentDidMount() {
    // 監(jiān)聽音樂播放時(shí)間
    $('#player').bind($.jPlayer.event.timeupdate, this.jPEvent);
},
//解綁
componentWillUnMount() {
    $('#Player').unbind($.jPlayer.event.timeupdate, this.jPEvent);
},
progressChangeHandler(progress) {
    //調(diào)用jPlayer的方法,更改播放時(shí)間
    // this.state.isPlay ? 'play' : 'pause'
    $('#player').jPlayer("play",duration * progress);

    this.setState({
        isPlay: true
    });
},
//音量調(diào)節(jié)
changeVolumeHandler(progress) {
    $('#player').jPlayer('volume',progress);

    // this.setState({
    //     volume: progress * 100,
    // });
},
//播放和暫停
play() {
    if(this.state.isPlay) {
        $('#player').jPlayer('pause');
    } else {
        $('#player').jPlayer('play');
    }

    this.setState({
        isPlay: !this.state.isPlay
    });
},
render() {
    return (
            //html代碼
        );
} 

代碼沒格式化不知道會(huì)不會(huì)缺個(gè)括號(hào)什么的,大概就這個(gè)意思。

2018年5月11日 18:58