无法读取属性导航未定义

Posted 2023-03-14

【中文标题】无法读取属性导航未定义

【英文标题】：can not read property navigation is undefined

【发布时间】：2019-12-05 01:05:15

【问题描述】：

我想在登录后重定向到另一个页面。

App.js

import React, Component from 'react';
import Platform, StyleSheet, Text, View from 'react-native';
import  createStackNavigator, createAppContainer  from 'react-navigation';

import Login from './app/components/Login';
import Home from './app/components/Home';

global.MyVar = 'https://aboutreact.com';

const NavStack = createStackNavigator(
  Login:
    screen:Login,
    navigationOptions: 
      header: null,
    
  ,
  Home:
    screen:Home,
    navigationOptions: 
      header: null,
    
  
);

const Application = createAppContainer(NavStack);

export default class App extends React.Component 
  render() 
    return (
      <Application/>
    );
  

登录.js

import React, Component from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import Platform, StyleSheet, Text, View, Image from 'react-native';
import  Button, ThemeProvider, Input  from 'react-native-elements';
import axios from 'axios';

export default class Login extends React.Component 

  constructor(props)
      super(props);
      this.buttonPress = this.buttonPress.bind(this);
      this.state = 
          user: '',
          password:'',    
      ;
  


  buttonPress() 
    axios.get('https://reqres.in/api/products/3')
      .then(function (response) 
        // return console.log(response.data.data.id);
        // return console.log(global.MyVar);

        this.props.navigation.navigate('Home');
      )
      .catch(function (error) 
        return console.log(error);
      );
  

  // loginSubmit = ()=>
  //   axios.get('https://reqres.in/api/products/3')
  //     .then(function (response) 
  //       // return console.log(response.data.data.id);
  //       // return console.log(global.MyVar);

  //       const  navigate  = this.props.navigation;
  //       navigate('Home',  user: 'John' )
  //     )
  //     .catch(function (error) 
  //       return console.log(error);
  //     );
  // 

  render() 
    return (
      <View style=styles.container>
        <View style=styles.loginform>
          <Image style=styles.logo source=require('../images/emllogo.png') />
          <View style=styles.formarea>
            <Input
             onChangeText=(user)=>this.setState(user)
              style=styles.inputtext
              placeholder='User Name f'
              leftIcon=
                <Icon
                  name='user'
                  size=20
                />
              
            />
          </View>
          <View style=styles.formarea>
            <Input
                secureTextEntry=true
                onChangeText=(password)=>this.setState(password)
                style=styles.inputtext
                placeholder='Password'
                leftIcon=
                  <Icon
                    name='lock'
                    size=20
                  />
                
              />
          </View>

          <View style=styles.formarea>
          <Button
            buttonStyle=
              backgroundColor:'red'
            
            title="Login"
            onPress=this.buttonPress
          />
          </View>
        </View>                   
      </View>
    );
  


const styles = StyleSheet.create(
  container:
    flex:1,
    backgroundColor:'#f00',
    justifyContent:'center',
    alignItems: 'center'
  ,
  loginform:
    width:'80%',
    minHeight:'50%',
    borderWidth:0.5,
    backgroundColor:'#fff',
    color:'#000',
    borderRadius:10,
    alignItems: 'center'
  ,
  logo:
    marginTop:'8%'
  ,
  bordertopgray:
    borderTopColor:'#ccc',
    borderTopWidth:0.5,
    width:'100%'
  ,
  formarea:
    width:'80%',
    height:'8%',
    marginTop:20
  
);

错误：

TypeError：无法读取未定义的属性“导航” 在 I:\XAMPP\htdocs\react\EMLV5\app\components\Login.js:17 在 tryCallOne (I:\XAMPP\htdocs\react\EMLV5\node_modules\promise\setimmediate\core.js:37) 在 I:\XAMPP\htdocs\react\EMLV5\node_modules\promise\setimmediate\core.js:123 在 I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:298 在 _callTimer (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152) 在 _callImmediatesPass (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:200) 在 Object.callImmediates (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:473) 在 MessageQueue.__callImmediates (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:337) 在 I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135 在 MessageQueue.__guard (I:\XAMPP\htdocs\react\EMLV5\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314)

【问题讨论】：

"this.props" 似乎未定义。检查，为什么。这也不是 php 问题，因此最好删除该标签。

抱歉@paskl 已经更新了。

【参考方案1】：

试试这个

   loginSubmit = ()=>
     const  navigate  = this.props.navigation;

     axios.get('https://reqres.in/api/products/3')
       .then(function (response) 
          return console.log(response.data.data.id);
          return console.log(global.MyVar);

         navigate('Home',  user: 'John' )
       )
       .catch(function (error) 
         return console.log(error);
       );
   

查看how to correct access this inside a callback

【参考方案2】：

您的问题是您使用的是function () 而不是数组函数() => ，并且您得到的是函数的this 而不是类的this。

export default class Login extends React.Component 

      constructor(props)
          super(props);
          this.buttonPress = this.buttonPress.bind(this);
          this.state = 
              user: '',
              password:'',    
          ;
      


      buttonPress() 
        axios.get('https://reqres.in/api/products/3')
          .then(response =>  // arrow function
            // return console.log(response.data.data.id);
            // return console.log(global.MyVar);

            this.props.navigation.navigate('Home');
          )
          .catch(function (error) 
            return console.log(error);
          );
      

      // loginSubmit = ()=>
      //   axios.get('https://reqres.in/api/products/3')
      //     .then(response =>  // arrow function
      //       // return console.log(response.data.data.id);
      //       // return console.log(global.MyVar);

      //       const  navigate  = this.props.navigation;
      //       navigate('Home',  user: 'John' )
      //     )
      //     .catch(function (error) 
      //       return console.log(error);
      //     );
      //