[英]undefined is not an object (evaluating 'this.props.navigation")
My navigation suddenly broke down. 我的导航突然中断了。 So there are 3 screens/components, I am using react-navigation to navigate between them.
因此,共有3个屏幕/组件,我正在使用react-navigation在它们之间进行导航。 First screen is to enter mobile phone number and password, it is sent to api, and some data is saved into state and passed to second screen , where i am enter code from sms and send another request to api, if response.status == 200, it goes to third screen .
第一个屏幕是输入手机号码和密码,它被发送到api,一些数据被保存到状态并传递到第二个屏幕 ,在第二个屏幕中 ,我从sms输入代码,然后向api发送另一个请求(如果response.status == 200,进入第三个屏幕 。 Navigation from 1st screen to 2nd works, but from 2nd to third is not.
从第一屏导航到第二屏有效,但从第二屏导航到第三屏无效。 Error occurs when i am going to third screen.
当我转到第三屏时发生错误。
FirstPage.js FirstPage.js
export default class FirstPage extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '',
password: '',
password2: ''
}
}
state = {
uuid: null
}
getCode(text, psw) {
fetch('url', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"telephone": text, "password": psw})
})
.then(response => response.json())
.then(response => {
let uuid = response['data']['id'];
this.setState({uuid});
this
.props
.navigation
.navigate('SecondPage', {uuid});
})
};
render() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View
style={{
width: 200,
height: 60,
borderColor: 'gray',
borderWidth: 1,
justifyContent: "center",
alignItems: "center"
}}>
<View>
<Text>phone number
</Text>
</View>
<View>
<TextInput
keyboardType='phone-pad'
onChangeText={(text) => this.setState({text})}
value={this.state.text}
placeholder={"phone number"}/>
</View>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View
style={{
width: 200,
height: 60,
marginTop: 25,
borderColor: 'gray',
borderWidth: 1,
justifyContent: "center",
alignItems: "center"
}}>
<View>
<Text>password</Text>
</View>
<View>
<TextInput
keyboardType='phone-pad'
secureTextEntry
onChangeText={(password) => this.setState({password})}
value={this.state.password}
placeholder={"password"}/>
</View>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View
style={{
width: 200,
height: 60,
marginTop: 25,
borderColor: 'gray',
borderWidth: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>password2</Text>
<TextInput
keyboardType='phone-pad'
secureTextEntry
onChangeText={(password2) => this.setState({password2})}
value={this.state.password2}
placeholder={"password2"}/>
</View>
</TouchableWithoutFeedback>
<Button
title="getcode"
onPress={() => this.getCode(this.state.text, this.state.password)}/>
</View>
);
}
}
SecondPage.js SecondPage.js
export default class SecondPage extends React.Component {
input = React.createRef();
constructor(props) {
super(props);
this.state = {
value: "",
focused: false,
uuid: this.props.navigation.state.params.uuid,
};
}
state = {
codeConf: '',
}
sendCode(uid, code) {
const body = new FormData
body.append("authentication", uid)
body.append("code", code)
fetch('url', {
method: 'POST',
body,
headers: {
Token: "2f30743e-014d-4f0f-8707-73ae550d8f14"
}
}).then(function (response) {
console.log(uid + "code is " + code)
console.log(response);
if (response.ok) {
this.props.navigation.navigate('ThirdPage');
} else {
console.log(response.status)
}
})
.catch((error) => {
console.error(error);
});
}
render() {
return (
<View
style={{
flex: 1,
backgroundColor: '#FDD7E4',
alignSelf: 'stretch',
textAlign: 'center',
borderWidth: 1,
justifyContent: "center",
alignItems: "center"
}}>
<CodeInput
ref="codeInputRef2"
secureTextEntry
codeLength={6}
keyboardType='phone-pad'
activeColor='rgba(0, 0, 0, 1)'
inactiveColor='rgba(0, 0, 0 , 0.1)'
autoFocus={true}
ignoreCase={true}
inputPosition='center'
size={50}
onFulfill={(code) => {
this.setState({codeConf: code})
}}/>
<Button
title="send code"
onPress={this.sendCode(this.state.uuid, this.state.codeConf)} />
</View>
)
}
}
ThirdPage.js ThirdPage.js
export default class ThirdPage extends React.Component {
render() {
return (
<View style={styles}>
<Text>
Hi there
</Text>
</View>
)
}
}
And finally App.js 最后是App.js
class App extends React.Component {
render() {
return (<AppStackNavigator />)
}
}
const AppStackNavigator = createStackNavigator({
FirstPage: {
screen: FirstPage
},
SecondPage: {
screen: SecondPage
},
ThirdPage: {
screen: ThirdPage
}
}, {initialRouteName: 'FirstPage'})
export default createAppContainer(AppStackNavigator);
I don't really why it happens, because react-navigation says that all then screens from App.js is sent to every screen as this.props.navigation, so I can access them from anywhere. 我真的不知道为什么会这样,因为react-navigation表示来自App.js的所有屏幕都作为this.props.navigation发送到每个屏幕,因此我可以从任何地方访问它们。
The issue is because you have lost scope by not binding your functions, this means that you are no longer accessing the correct value of this
. 问题是因为没有绑定功能而失去了作用域,这意味着您不再访问
this
的正确值。 You can fix this issue by using arrow functions. 您可以使用箭头功能解决此问题。
Rewrite your sendCode
function in the following way, noticing the use of arrow functions 通过以下方式重写
sendCode
函数,注意使用箭头函数
sendCode = (uid, code) => { // <- arrow function
const body = new FormData();
body.append('authentication', uid);
body.append('code', code);
fetch('url', {
method: 'POST',
body,
headers: {
Token: '2f30743e-014d-4f0f-8707-73ae550d8f14'
}
}).then(response => { // <- arrow function
console.log(uid + 'code is ' + code);
console.log(response);
if (response.ok) {
this.props.navigation.navigate('ThirdPage');
} else {
console.log(response.status);
}
}).catch((error) => {
console.error(error);
});
}
And finally update the code in your button to be. 最后将代码更新为您要的按钮。
<Button
title="send code"
onPress={() => this.sendCode(this.state.uuid, this.state.codeConf)} />
you need to bind and pass function definition to onPress prop of Button component in SecondPage.js. 您需要将函数定义绑定并传递到SecondPage.js中Button组件的onPress属性。
<Button
title="send code"
onPress={()=>this.sendCode(this.state.uuid,this.state.codeConf)} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.