Question

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button, Text} from 'react-native';
import { StackNavigator } from 'react-navigation';       

 export default class LoginActivity extends React.Component {

      static navigationOptions =
       {
          title: 'LoginActivity',
       };

    constructor(props) {

        super(props)

        this.state = {

          UserPhone: ''

        }

      }

    UserLoginFunction = () =>{

     const { UserPhone }  = this.state ;


    fetch('https://appname.herokuapp.com/users/userlogin/'+UserPhone).then((response) => response.json())
          .then((responseJson) => {

            // If server response message same as Data Matched
           if(responseJson == 'match')
            {

                //Then open Main page for booking ride
               this.props.navigation.navigate('Third', { Phone: UserPhone });


            }
            else{

                 this.props.navigation.navigate('Second', { Phone: UserPhone });
            }

          }).catch((error) => {
            console.error(error);
          });


      }

      render() {
        return (

    <View style={styles.MainContainer}>

            <Text style= {styles.TextComponentStyle}>User Login</Text>

            <TextInput

              // Adding hint in Text Input using Place holder.
              placeholder="Enter User Phone"

              onChangeText={UserPhone => this.setState({UserPhone})}

              // Making the Under line Transparent.
              underlineColorAndroid='transparent'

              style={styles.TextInputStyleClass}
            />
            <Button title="Login" onPress={this.UserLoginFunction} color="#2196F3" />



    </View>

        );
      }
    }
AppRegistry.registerComponent('appname', () => appname);

我是反应原生的新手。上面的代码片段只是从登录字段接受一些数据，然后进行API调用，并根据从服务器收到的数据，我正在调用第二个活动或第三个活动。

相同的代码工作正常，直到昨天，今天我不得不擦除存储库并重新开始一些技术故障，但突然之间应用程序显示以下错误：

undefined is not an object (evaluating '_this.props.navigation.navigate')
<unknown>
    C:\Users\username\Desktop\cabchain-react\cabchain\App.js:51:33
tryCallOne
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\promise\setimmediate\core.js:37:14
<unknown>
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\promise\setimmediate\core.js:123:25
<unknown>
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:297:23
_callTimer
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:154:6
_callImmediatesPass
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:202:17
callImmediates
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:466:11
__callImmediates
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:329:4
<unknown>
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:147:6
__guardSafe
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:316:6
flushedQueue
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:146:17
invokeCallbackAndReturnFlushedQueue
    C:\Users\username\Desktop\cabchain-react\cabchain\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:11

Answer 1

this来自父上下文;它不能被内部函数访问，例如fetch().then。考虑一下：

在获取

之前引用this

UserLoginFunction = () =>{
   const { UserPhone }  = this.state ;
   const that = this; // use that for refenrence
 fetch('https://appname.herokuapp.com/users/userlogin/'+UserPhone).then((response) => response.json())
      .then((responseJson) => {
        // If server response message same as Data Matched
       if(responseJson == 'match')
        {
            //Then open Main page for booking ride
           that.props.navigation.navigate('Third', { Phone: UserPhone });
        }
        else{
             that.props.navigation.navigate('Second', { Phone: UserPhone });
        }
      }).catch((error) => {
        console.error(error);
      });
  }

或将函数更改为异步

async UserLoginFunction = () =>{
   const { UserPhone }  = this.state ;
   const response = await fetch('https://appname.herokuapp.com/users/userlogin/'+UserPhone);
   if (response && response.json()) {
       const responseJson = response.json();
       // If server response message same as Data Matched
       if(responseJson == 'match')
        {
            //Then open Main page for booking ride
           this.props.navigation.navigate('Third', { Phone: UserPhone });
        }
        else{
             this.props.navigation.navigate('Second', { Phone: UserPhone });
        }
   }
  }

React-Native：this.props.navigation.navigate undefined

1 个答案: