Reactjs react-redux-来自mapDispatchToProps的props未定义PropType

我已经试着解决这个问题好几个小时了

我作为

userActionCreators导入的函数失败
Proptypes.func.isRequired

这是
道具类型
给我的错误消息：-

警告：失败的道具类型：道具
authUser
标记为必需
在
中验证
，但其值为
未定义

在我的容器中：-

import React from 'react'
import PropTypes from 'prop-types';
import {Authenticate} from '_components/'
import auth from '_helpers/auth'
import { connect } from 'react-redux'
import * as userActionCreators from '_redux/modules/users'
import { bindActionCreators } from 'redux'

class AuthenticateContainer extends React.Component {

  render() {

const handleAuth = () => {

  this.props.fetchingUser()
  auth().then((user) => {
    this.props.fetchingUserSuccess(user.uid, user, Date.now())
    this.props.authUser(user.id)
  })
  .catch((error) => this.props.fetchingUserFailure(error) )
}

    return (
      <Authenticate
        isFetching={this.props.isFetching}
        error={this.props.error}
        onAuth={handleAuth}
      />
    );
  }
}

Authenticate.propTypes = {
  error: PropTypes.string.isRequired,
  isFetching: PropTypes.bool.isRequired,
  authUser: PropTypes.func.isRequired,
  fetchingUser: PropTypes.func.isRequired,
  fetchingUserFailure: PropTypes.func.isRequired,
  fetchingUserSuccess: PropTypes.func.isRequired,
};

const mapStateToProps = (state) => {
  return {
    isFetching: state.isFetching,
    error: state.error
  }
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators(userActionCreators, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)    (AuthenticateContainer);

看起来您在容器组件中的错误对象上设置了proptypes

Authenticate.propTypes
应该是
AuthenticateContainer.propTypes
：

AuthenticateContainer.propTypes = {
  error: PropTypes.string.isRequired,
  isFetching: PropTypes.bool.isRequired,
  authUser: PropTypes.func.isRequired,
  fetchingUser: PropTypes.func.isRequired,
  fetchingUserFailure: PropTypes.func.isRequired,
  fetchingUserSuccess: PropTypes.func.isRequired,
};

避免此问题的一个好方法是将proptypes定义为类内的静态类型：

class AuthenticateContainer extends React.Component {

  static propTypes = {
    error: PropTypes.string.isRequired,
    isFetching: PropTypes.bool.isRequired,
    authUser: PropTypes.func.isRequired,
    fetchingUser: PropTypes.func.isRequired,
    fetchingUserFailure: PropTypes.func.isRequired,
    fetchingUserSuccess: PropTypes.func.isRequired
  };

  // ...etc
}

在第一个代码片段中，您将
propTypes
设置为
Authenticate
而不是
AuthenticateContainer
是的，就是这样。我在StackOverflow上发布的时候只是一个打字错误。每个程序员都是最可怕的噩梦。谢谢你，先生，谢谢你，伙计。我现在转而在类本身中定义它们。这对我来说也是更好的组织。
AuthenticateContainer.propTypes = {
  error: PropTypes.string.isRequired,
  isFetching: PropTypes.bool.isRequired,
  authUser: PropTypes.func.isRequired,
  fetchingUser: PropTypes.func.isRequired,
  fetchingUserFailure: PropTypes.func.isRequired,
  fetchingUserSuccess: PropTypes.func.isRequired,
};

class AuthenticateContainer extends React.Component {

  static propTypes = {
    error: PropTypes.string.isRequired,
    isFetching: PropTypes.bool.isRequired,
    authUser: PropTypes.func.isRequired,
    fetchingUser: PropTypes.func.isRequired,
    fetchingUserFailure: PropTypes.func.isRequired,
    fetchingUserSuccess: PropTypes.func.isRequired
  };

  // ...etc
}