Question

注册后，我试图重定向到另一页，但我收到的消息是烤面包，但导航失败。我遇到错误 未定义不是对象（正在评估'this.props.navigate'）

我尝试使用功能进行呼叫导航，但是没有运气。

Register.js

handleSubmit(event){
     event.preventDefault();
     var data = {
        uname: this.state.uname,
        uemail: this.state.uemail,
        upass: this.state.upass
     }   
     fetch('http://spaceonerents.com/API/api/API/register/submit', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json'},
          body: JSON.stringify(data)
     }).then(function(response){
         Toast.show('You registered successfully');   
         this.props.navigation.navigate('Login');
     }).catch((error) => {
        console.error(error);
     });
   }

AppNavigator.js

import {createStackNavigator, createAppContainer, createDrawerNavigator} from 'react-navigation';
import HomeScreen from './Home';
import ProfileScreen from './Profile';
import LoginScreen from './Login';
import RegisterScreen from './Register';

const AppssNavigator = createStackNavigator({
    Home : HomeScreen,
    Profile : ProfileScreen,
    Register : RegisterScreen,
    Login : LoginScreen
},
{
    initialRouteName: 'Home'
});

const AppNavigator = createDrawerNavigator({
    Home: AppssNavigator,
    Login: AppssNavigator,
});

export default createAppContainer(AppNavigator);

App.js

import React, {Component} from 'react';
import AppNavigator from './components/AppNavigator';
import {createAppContainer} from 'react-navigation';
import {StyleSheet, Text, View, Button} from 'react-native';

class App extends Component {
  render(){
    return (
      <AppNavigator />
    );
  }  
};

const styles = StyleSheet.create({

});

export default App;

提前谢谢

Answer 1

问题在于，在这段代码中：

 }).then(function(response){
     Toast.show('You registered successfully');   
     this.props.navigation.navigate('Login');

您的函数使用function(){}语法，这使得this的上下文指向该函数中的this.props不存在。

相反，请使用箭头符号，该符号没有其自己的this上下文，并允许您引用this存在的更高范围的this.props上下文：

     }).then((response)=>{
     Toast.show('You registered successfully');   
     this.props.navigation.navigate('Login');

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

Answer 2

请勿声明函数并传递箭头。

.then(response => response.json())
      .then(responseJson => {
         Toast.show('You registered successfully');   
         this.props.navigation.navigate('Login');
   }

Answer 3

尝试此代码。我希望它对您有用。

 .then(function (response) {
      Toast.show('You registered successfully');   
      }).then(() => this.props.navigation.navigate('Login'))

Answer 4

请下面的代码来自我的本机代码库，我能够通过登录成功消息从后端获取登录 api，但是在尝试使用此代码将用户重定向到仪表板屏幕时 this.props.navigation.navigate("首页", { 参数：{ 屏幕：'仪表板'， } }); 它不起作用，用户只会收到登录成功消息，但不会被重定向，任何人都可以提供帮助？

获取（插入APIURL， { 方法：'POST'，标题：标题，正文：JSON.stringify（数据）， }) .then((响应)=>response.json()) .then((响应)=>{ if(response == "登录成功"){

                    alert(response[0].Message);
                    
                    this.props.navigation.navigate("Home", {
                        params: {
                            screen: 'Dashboard',
                          }
                    });
                 }
                 else{
                    alert(response[0].Message);
                }
                })
                .catch((error)=>
                {
                    alert("Error"+error);
                });

反应本地-在ajax成功注册后重定向屏幕

4 个答案: