无法对卸载的组件 REACT-NATIVE 执行 React 状态更新

时间:2020-12-19 16:45:25

标签: javascript react-native

我正在构建一个音乐播放器,所以我希望当用户关闭应用程序时,保存他正在听的歌曲的位置,为此我只需在 Track zone component 的 componentWillUnmount 中运行一个函数,这个:

 componentDidMount() {
        TrackPlayer.addEventListener("playback-track-changed", this.get_actual_track);
        TrackPlayer.addEventListener("playback-queue-ended", this.get_queue_option);
        this.init();
    }
  
   componentWillUnmount() {
      this.save_position();
   }

    save_position = async() => {
        status = await TrackPlayer.getState();
        console.log(status);
        if (status === 3 || status === 8 || status === 2) {
            let position = await TrackPlayer.getPosition();
            await AsyncStorage.setItem("last_song_duration", JSON.stringify(position));
            await TrackPlayer.pause();
            TrackPlayer.destroy();
        }else {
            return;
        }
    }

有时它会保存它,有时它会保存它,认为它与它有关,但不知道是什么,当我打开应用程序时,这是加载所有内容的第一个组件:

在应用程序中我有 Tab navigator

export default class App extends React.Component {

渲染(){ 返回 ( <> ); } }

这是tab navigator

   componentDidMount() {
    TrackPlayer.addEventListener("playback-track-changed", this.play_selected_music);
    this.requestPermission();
}

requestPermission = async () => {
    try {
        const permission = await PermissionsAndroid.requestMultiple(
            [
                PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
            ],
        );
        if (permission["android.permission.READ_EXTERNAL_STORAGE"] === PermissionsAndroid.RESULTS.GRANTED 
            && permission["android.permission.WRITE_EXTERNAL_STORAGE"] === PermissionsAndroid.RESULTS.GRANTED) {
            try {
                let tracks = [];
                let tracks_object = []; 
                tracks = await MusicFiles.getAll({
                    cover: true,
                });
                let length = tracks.length;
                for (i = 0 ; i < length ; i++) {
                    tracks_object.push(new Tracks_info(tracks.results[i]));
                }
                this.setState({tracks: tracks_object}, () => this.init_player());
            }catch(error) {
                alert(error);
            }
        }else {
            this.requestPermission();
        }
    }catch (error) {
        alert(error)
    }
};

init_player = async () => {
    
    try {
        if (this.random) {
            let tracks = this.random_queue();
            await TrackPlayer.setupPlayer();
            await TrackPlayer.updateOptions({ stopWithApp: true });
            await TrackPlayer.add(tracks);
            this.setState({random_tracks: tracks, init: true});
        }else {
            let tracks = this.state.tracks;
            await TrackPlayer.setupPlayer();
            await TrackPlayer.updateOptions({stopWithApp: true});
            await TrackPlayer.add(tracks);
            this.setState({init: true});
        }
    }catch(error) {
        alert(error);
    }
}

它的渲染方法:

 <NavigationContainer>
                    <Tab.Navigator>
                        <Tab.Screen name = "Tracks" children = {({navigation}) => <Tracks navigation = {navigation} tracks = {this.state.tracks}></Tracks>}></Tab.Screen>
                        <Tab.Screen name = "PlayList" children = {({navigation}) => <PlayList navigation = {navigation} tracks = {this.state.tracks}></PlayList>}></Tab.Screen>
                    </Tab.Navigator>
                    <BottomSheet
                        ref = {ref => (this.sheetref = ref)}
                        initialSnap = {1}
                        snapPoints = {[Dimensions.get("window").height - StatusBar.currentHeight, 95]}
                        renderHeader = {() => <Player_Header {...props}></Player_Header>}
                        renderContent = {() => <Track_Zone {...props}></Track_Zone>}
                        enabledContentGestureInteraction = {false}
                        onOpenEnd = {this.hide_icon}
                        onCloseEnd = {this.show_icon}>
                    </BottomSheet>
   </NavigationContainer>

0 个答案:

没有答案