reactjs - 如何导航?(未定义不是对象(评估“this.props”)
问题描述
我正在尝试导航到其他屏幕,并且正在使用类组件。当我将输入数据保存到 MySQL 时,我想导航到名为“Map”的屏幕。我尝试了我知道的方法,但最后我无法导航。
我正在尝试从 AAddBinScreen 导航到 MapScreen(我有这个名为“地图”的屏幕)。
这是我的 AABinScreen 代码:
constructor() {
super();
this.state = {
...
}
this.goMap = this.goMap.bind();
}
pressAdd(){
const check = this.saveData();
if(check == true){
Alert.alert("Kayıt başarıyla eklendi.")
setTimeout(this.goMap(), 800);
}
}
goMap() {
this.params.navigation.navigate('Map');
}
这是我的按钮。
render() {
return (
<SafeAreaView style={styles.container}>
<ScrollView>
...
...
<TouchableOpacity disabled={this.state.disabled}
activeOpacity={0.8} style={styles.Btn}
onPress={()=>this.pressAdd()}>
<Text style={styles.btnText}>EKLE</Text>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
}
}
module.exports = AAddBinScreen;
还有我的 app.js
const navigator = createStackNavigator({
...
Map: {
screen: MapScreen,
navigationOptions:{
headerShown:false
}
},
...
}, {
initialRouteName: 'Login',
});
export default createAppContainer(navigator);
解决方案
您可以尝试更改constructor
如下:
constructor(props) {
super(props);
this.state = {
address_m: '',
street: '',
district: '',
city: '',
country: '',
info: '',
lat: '',
lon: '',
}
this.goMap = this.goMap.bind(this);
}
您还可以更改goMap
为箭头功能并避免绑定this
goMap = () => this.props.navigation.navigate('Map');
并且您必须更改pressAdd
函数,因为您在goMap()
内部调用setTimeout
并且它将在不等待延迟的情况下执行。您需要传递函数而不是调用它。
setTimeout(this.goMap, 800);
推荐阅读
- ios - 找不到目标“x86_64-apple-ios-simulator”的模块
- dart - 目录比较在 Dart 中不起作用?
- linq - 创建包含 linq 查询的异步方法
- apache-spark - 在 Apache Spark 中,同一 Stage 中的任务是否同时工作?
- r - 在 Windows 和 Linux 上为特定 PRNG 生成不同的随机数
- python - 将字典中的函数用于菜单
- visual-studio - 如何将 firebase ml 套件与 xamarin.forms 一起使用?
- python - 获取程序中的计算次数
- java - 将 view.jsp 中的日期传递给我的 Java Portlet
- python - 如何比较数据框中的两个字符串列表以获取任何匹配项以在 python 中获得 True 或 False?