Перейдите к странице athor от отправки в реагировать на реду

Question

Я хочу перейти на страницу профиля после успешного входа в систему с помощью Response Redux, но выдает ошибку как:

[Отклонение необработанного обещания: ошибка типа: undefined не является объектом (оценка '_this3.props.navigation')]]

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput, Image, TouchableHighlight } from 'react-native';
import { connect } from 'react-redux';
import axios from 'axios';
import { Actions } from 'react-native-router-flux';


class LogIn extends React.Component {

  
  state = {
    user_name: "",
    password: "",
  } 

  render(){
    return(
      <View style={styles.container}>       
                 
      <View  style={styles.inputContainer}>
      <TextInput style={styles.inputs}
              placeholder="User Name"
              underlineColorAndroid='transparent'
              onChangeText={(text)=>this.setState({user_name: text})}/>
      </View>          
      <View style={styles.inputContainer}>
      <TextInput style={styles.inputs}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(text)=>this.setState({password: text})}/>
      </View>        
      <View style={styles.btn}>
      <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]}  onPress = {()=>this.props.logIn(this.state)}>
         <Text style={styles.loginText}>Login</Text>
      </TouchableHighlight> 

       <TouchableHighlight style={styles.buttonContainer}>
            <Text>Forgot your password?</Text>
        </TouchableHighlight>
                
      <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress = {()=>navigation.navigate('SignUp')}>  
      <Text>Register here</Text>
        </TouchableHighlight>
      
      </View>             
      </View>      
      );
   }
}

function mapStateToProps (state){
  return {    
    user_name: state.user_name,
    password: state.password,
  }
}


function mapDispatchToProps(dispatch){

  return{
    logIn: (text) => {
      if(text.user_name == ""){
        alert("Enter user_name");       
      }
      else if(text.password == ""){
        alert("Enter Password");       
      }      
      else {
        var body = {email: text.user_name,password: text.password}
        console.log("body",body);
        axios.post('http://users/user/login',body)
        .then(res=>{
             dispatch({ type: 'LOG_IN',payload: res});
             this.props.navigation.navigate('AppDrawer');
        },err=>{         
             alert(err);         
        }) 
      }      
    }
  }
}


export default connect(mapStateToProps,mapDispatchToProps)(LogIn)

Я также использовал NavigationActions, но появляется та же ошибка.
Я также прошел навигационную опору, но выдает ту же ошибку.

Answer 1

mapDispatchToProps определена функция вне вашего реагирующего компонента ... this контекст не относится к компоненту React, поэтому вы можете получить доступ к this.props.navigation

Доступ к реквизитам вашего компонентачерез второй необязательный параметр mapDispatchToProps:

const mapDispatchToProps = (dispatch, ownProps) => {
  // access ownProps.navigation 
};