8

我正在使用 reactnavigation 和 redux 创建一个 react-native 应用程序。

在加载应用程序时，我从 NavContainer 收到以下警告：Warning: Failed prop type: The prop 'navigation.dispatch' is marked as required in 'CardStack', but its value is 'undefined'

当我尝试通过导航导航页面时，这会导致错误，this.props.navigation.navigate('Station');因为 navigation.dispatch 不是函数

该应用程序有一个 NavContainer ，我猜它缺少一些东西，因为在渲染函数中未定义调度： 

import React, { Component } from 'react'
import { addNavigationHelpers } from 'react-navigation'
import AppNavigator from '../lib/navigationConfiguration'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux';
import { ActionCreators } from '../actions';

class NavContainer extends Component {

  render(){
    const { dispatch, navigationState} = this.props
    return (
      <AppNavigator
        navigation={
          addNavigationHelpers({
            dispatch: dispatch,
            state: navigationState
          })
        }
      />
    )
  }
}
function mapStateToProps(state){
  return {
    navigationState: state.nav
  }
}
function mapDispatchToProps(dispatch){
  return bindActionCreators(ActionCreators, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(NavContainer)
4

1 回答 1

21

当您定义 amapDispatchToProps时，connect不会传递dispatch给包装的组件。这this.props.dispatch就是未定义的原因。为了解决这个问题，你可以这样做：

function mapDispatchToProps(dispatch){
  return Object.assign({dispatch: dispatch}, bindActionCreators(ActionCreators, dispatch));
}
于 2017-02-24T18:51:42.803 回答