Question

我试图使用Redux和函数创建一个React组件 userSignUpRequest 我按照教程但仍然收到错误：我认为是可能的，因为我使用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);

这是我的功能＆＃34; loginAxios.js＆＃34;

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组件中，您没有提供道具名称userSignUpRequest。你就是这样：

<Login/>

如果该组件基本上需要userSignUpRequest，则需要将其传入。

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

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

Answer 2

您正在导入模块userSignUpRequest。它似乎并没有作为道具传递给你。尝试在没有＆＃34; this.props＆＃34;

的情况下调用您的模块

Answer 3

对于我来说，我已经通过使用以下语法

解决了警告

parentRoute={`${parentRoute}`}

代替

parentRoute={parentRoute}

希望有帮助。

失败的道具类型：道具`userSignUpRequest`在`Login`中标记为必需，但其值为'undefined`

3 个答案: