在 react redux 中从 dispatch 导航到另一个页面

Question

我想在使用 react redux 成功登录后导航到个人资料页面，但它给出的错误是：

[未处理的承诺拒绝：TypeError: undefined is not an object (evalating '_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 上下文不引用反应组件，所以你可以访问this.props.navigation

通过mapDispatchToProps 的第二个可选参数访问您的组件道具：

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