Question

React-Native：this.props.navigation.navigate 未定义

2018-03-13

1199

navigation react-native react-props

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);

我是 react-native 的新手。上面的代码片段只是从登录字段接受一些数据，然后进行 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; // 以此为参考
fetch('https://appname.herokuapp.com/users/userlogin/'+UserPhone).then((response) => response.json())
.then((responseJson) => {
// 如果服务器响应消息与匹配的数据相同
if(responseJson == 'match')
{
// 然后打开主页预订行程
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(responseJson == 'match')
{
// 然后打开主页预订行程
this.props.navigation.navigate('Third', { Phone: UserPhone });
}
else{
this.props.navigation.navigate('Second', { Phone: UserPhone });
}
}
}