我尝试从一个屏幕转换到另一个屏幕时收到以下错误消息:
这发生在一个游戏应用程序中,游戏中涉及多个手机,并根据他们在游戏中的角色具有不同的屏幕,并取决于该手机是托管游戏还是客人。
当我尝试访问下一个屏幕时(左侧手机上),下图显示了此错误消息。左侧手机的屏幕应该与右侧的屏幕相同,但没有“下一轮”和“结束游戏”按钮。但我得到一个完全不同的屏幕与错误消息:
这是上一个屏幕的代码,用于将手机导航到此“分数”屏幕:
import React, {Component} from 'react';
import {AppRegistry, View, Text, ScrollView, StyleSheet} from 'react-native';
import {CardFlip1} from '../components/CardFlip1';
import {CardFlip2} from '../components/CardFlip2';
import colors from '../config/colors';
import {PrimaryButton} from '../components/PrimaryButton';
import AsyncStorage from '@react-native-community/async-storage';
import Orientation from 'react-native-orientation-locker';
window.navigator.userAgent = 'react-native';
import io from 'socket.io-client/dist/socket.io';
class judge_screen extends Component {
constructor (props) {
super(props);
this.state = {
game_round: '',
player1: '',
player2: '',
label1: '',
label2: '',
current_user: ''
}
}
componentWillMount = () => {
this.getActives();
}
componentDidMount() {
Orientation.lockToLandscape();
this.socket = io("socket address is here", {
jsonp: false
});
}
getActives = async () => {
let user = await AsyncStorage.getItem('email');
let player_1 = await AsyncStorage.getItem('Player1');
let player_2 = await AsyncStorage.getItem('Player2');
let round = await AsyncStorage.getItem('Round');
this.setState({game_round: round});
this.setState({player1: player_1});
this.setState({player2: player_2});
var label_start = "Choose ";
var label_end = "'s fate";
var player_1_name = this.state.player1;
var player_2_name = this.state.player2;
var label1_str = label_start.concat(player_1_name, label_end);
this.setState({label1: label1_str});
var label2_str = label_start.concat(player_2_name, label_end);
this.setState({label2: label2_str});
}
player1Win = async () => {
let host = await AsyncStorage.getItem('host');
if (host == 'yes') {
let user = await AsyncStorage.getItem('email');
this.setState({current_user: user});
} else {
let user = await AsyncStorage.getItem('users_id');
this.setState({current_user: user});
}
var user_fix = this.state.current_user;
let player_name = await AsyncStorage.getItem('Player1');
AsyncStorage.setItem('Winner', player_name);
fetch('fetch address is here', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application.json',
},
body: JSON.stringify({
email: user_fix,
Name: player_name,
Host: host
})
}).then((response) => response.json())
.then((responseJson) => {
if (host == 'yes') {
this.socket.emit('end_round', 'end');
this.props.navigation.navigate('end_round_host_screen');
} else {
// This is the navigation to the screen getting the error:
this.socket.emit('end_round', 'end');
this.props.navigation.navigate('end_round_guest_screen');
}
}).catch((error) => {
console.error(error);
});
}
player2Win = async () => {
let host = await AsyncStorage.getItem('host');
if (host == 'yes') {
let user = await AsyncStorage.getItem('email');
this.setState({current_user: user});
} else {
let user = await AsyncStorage.getItem('users_id');
this.setState({current_user: user});
}
var user_fix = this.state.current_user;
let player_name = await AsyncStorage.getItem('Player2');
AsyncStorage.setItem('Winner', player_name);
fetch('fetch address is here', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application.json',
},
body: JSON.stringify({
email: user_fix,
Name: player_name,
Host: host
})
}).then((response) => response.json())
.then((responseJson) => {
if (host == 'yes') {
this.socket.emit('end_round', 'end');
this.props.navigation.navigate('end_round_host_screen');
} else {
// This is the navigation to the screen getting the error:
this.socket.emit('end_round', 'end');
this.props.navigation.navigate('end_round_guest_screen');
}
}).catch((error) => {
console.error(error);
});
}
render() {
return (
<ScrollView>
<View style={{flexDirection: 'row'}}>
<View style={styles.container}>
<Text style={[styles.text]}>
{this.state.player1}
</Text>
<CardFlip1 />
<PrimaryButton
onPress={() => this.player1Win()}
label={this.state.label1}
>
</PrimaryButton>
</View>
<View style={styles.container}>
<Text style={[styles.text]}>
{this.state.player2}
</Text>
<CardFlip2 />
<PrimaryButton
onPress={() => this.player2Win()}
label={this.state.label2}
>
</PrimaryButton>
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: colors.backgroundColor,
margin: 10,
paddingBottom: 5,
borderWidth: 1,
borderColor: colors.borderColor,
},
text: {
fontSize: 18,
color: colors.primaryText,
marginTop: 10,
},
textPadding: {
paddingBottom: 10,
},
headingText: {
fontSize: 24,
fontWeight: '500',
color: colors.primaryText,
margin: 10,
},
textMarginHorizontal: {
marginHorizontal: 10,
},
})
export default judge_screen;
以下是我尝试导航到的“end_round_guest_screen”的代码:
import React, {Component} from 'react';
import {View, Text, ScrollView, StyleSheet} from 'react-native';
import colors from '../config/colors';
import {PrimaryButton} from '../components/PrimaryButton';
import {ScoreBoardGuest} from '../components/ScoreBoardGuest';
import AsyncStorage from '@react-native-community/async-storage';
import Orientation from 'react-native-orientation-locker';
window.navigator.userAgent = 'react-native';
import io from 'socket.io-client/dist/socket.io';
class end_round_guest_screen extends Component {
constructor (props) {
super(props);
this.state = {
game_round: '',
winner: ''
}
}
componentWillMount = () => {
this.getActives();
this.getWinner();
}
componentDidMount() {
Orientation.unlockAllOrientations();
this.socket = io("socket address is here", {
jsonp: false
});
this.socket.on('next_round', () => this.nextRound());
this.socket.on('end_game', () => this.endGame());
}
getActives = async () => {
let round = await AsyncStorage.getItem('Round');
this.setState({game_round: round});
}
getWinner = async () => {
let user = await AsyncStorage.getItem('users_id');
//let host = await AsyncStorage.getItem('host');
fetch('fetch address is here', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application.json',
},
body: JSON.stringify({
email: user
})
}).then((response) => response.json())
.then((responseJson) => {
this.setState({winner: responseJson});
}).catch((error) => {
console.error(error);
});
}
nextRound = () => {
this.props.navigation.navigate('round_start_guest_screen');
}
endGame = () => {
this.props.navigation.navigate('end_game_guest_screen');
}
render() {
return (
<ScrollView>
<View style={{alignItems: 'center'}}>
<Text style={styles.headingText}>
Round {this.state.game_round}
</Text>
<Text style={styles.text}>
{this.state.winner} wins this round!
</Text>
</View>
<View style={styles.container}>
<ScoreBoardGuest />
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: colors.backgroundColor,
margin: 10,
paddingVertical: 5,
borderWidth: 1,
borderColor: colors.borderColor,
},
text: {
fontSize: 18,
color: colors.primaryText,
marginTop: 10,
},
headingText: {
fontSize: 24,
fontWeight: '500',
color: colors.primaryText,
margin: 10,
},
})
export default end_round_guest_screen;
“end_round_guest_screen”显示没有加载任何状态的秒或2,然后转到带有错误消息的“Card Back”屏幕。
堆栈跟踪显示错误发生在end_round_guest_screen
内部。根据你的描述,在导航到“卡后退”并显示错误之前它会显示2秒钟,我认为它发生在fetch回调中的this.setState({winner: responseJson})
行上。
如果获取请求仍在等待响应,则会发生这种情况,然后调用nextRound或endGame处理程序,这会触发导航,从而触发卸载。当fetch获取数据并且即将调用setState时,不再安装该组件。
通常有两种方法可以解决这个问题。
1.)(反模式)使用componentDidMount / componentWillUnmount回调跟踪组件是否仍然挂载,然后在调用setState之前执行isMounted检查。
componentDidMount() {
this.isMounted = false
}
componentWillUnmount() {
this.isMounted = false
}
getWinner = async () => {
//inside fetch
if (this.isMounted) {
this.setState({winner: responseJson})
}
}
2.)(推荐)使用在componentWillUnmount回调中取消任何待处理的网络请求。
例如,您可以使用AbortController取消获取请求。有关示例代码,请参阅https://stackoverflow.com/a/53435967/803865。