失败的道具类型：道具“userSignUpRequest”在“登录”中被标记为必需，但其值为“未定义”

Question

我试图使用 Redux 和函数userSignUpRequest创建一个 React 组件 我按照教程但仍然收到错误：我认为这是可能的，因为我使用 module.exports 来导出我的组件而不是默认情况下导出但我不知道如何修复它.

我的店铺：

const middleware = routerMiddleware(hashHistory);
const store = createStore(
  reducers,
  applyMiddleware(middleware)
);

render(
  <Provider store={store}>
    <Router
      onUpdate={scrollToTop}
      history={history}
      routes={rootRoute}
    />
  </Provider>,
  document.getElementById('app-container')
);

这是我的组件：

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'; //to pass functions
import { userSignUpRequest } from '../../../actions/loginAxios'; 

class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      {** initial state **}
    };
  }

  onSubmit(e) {
    e.preventDefault();
    if(this.isValid()){
      //reset errros object and disable submit button
      this.setState({ errors: {}, isLoading: true });

      //we store  a function in the props
      this.props.userSignUpRequest(this.state).then(
        (response) => {
          //succes redirect
          this.context.router.history.push('/');
        },
        (error) => {
          console.log("error");
          this.setState({ errors: error.response.data, isLoading: false });
        });

    } else {
      console.log(this.state.errors);
    }

  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  render() {
    const { errors } = this.state; //inicializate an get errors
    const { userSignUpRequest } = this.props;

    return (
      <div className="body-inner">
        {*** My React Login React Form ***}
      </div>
    );
  }
}

const Page = () => (
  <div className="page-login">
    <div className="main-body">
      <QueueAnim type="bottom" className="ui-animate">
        <div key="1">
          <Login />
        </div>
      </QueueAnim>
    </div>
  </div>
);

//To get the main Actions
Login.propTypes = {
  userSignUpRequest: PropTypes.func.isRequired

};

function mapStateToProps(state) {
  //pass the providers
  return {

  }
}

module.exports = connect(mapStateToProps, { userSignUpRequest })(Page);

这是我的函数“loginAxios.js”

import axios from "axios";

export function userSignUpRequest(userData) {
  return dispatch => {
    return axios.post("/api/users", userData);
  }
}

我是 React 的新手，所以非常感谢您的支持！！谢谢

Answer 1

您明确使用propTypes甚至使用isRequired，这正是它听起来的样子。

Login.propTypes = {
  userSignUpRequest: PropTypes.func.isRequired
};

但是在您的Page组件中，您没有提供 prop name userSignUpRequest。你只是这样：

<Login/>

如果userSignUpRequest从根本上需要该组件才能工作，则需要将其传入。

<Login userSignUpRequest={() => myFunction()}/>

如果不是，那么只需删除您的propTypes声明。