如何解决TypeError:无法读取reactjs中未定义的属性'type'?

时间:2020-05-19 08:52:24

标签: reactjs redux react-redux

我正在与django后端进行交互的auth系统上

我有这段代码可以使用withFormik获取表单值

import { withFormik } from "formik";
import innerForms from "./innerForms";
import * as Yup from "yup";
import { ApiService } from "../../services/dataService";
import { toast } from "react-toastify";
import { persistMyInfo } from "../../../components/services/persistence";
import { compose } from "redux";
import { connect } from "react-redux";

const mapDispatchToProps = (dispatch) => ({
    loggedIn: (payload) => dispatch({ type: "LOGGED_IN", payload }),
});
export const EnhancedRegisterforms = compose(
    connect(null, mapDispatchToProps),
    withFormik({
        mapPropsToValues: (props) => ({
            FirstName: "test",
            LastName: "test",
            email: "test@gmail.com",
            password: "qweasdqwe",
            ConfirmPassword: "qweasdqwe",
            TypeOfUser: "expert",
        }),
        validationSchema: Yup.object().shape({
            FirstName: Yup.string()
                .max(20, "do not enter more than 20 ")
                .min(3, "do not enter less than 3 ")
                .required("FirstName is requierd"),
            LastName: Yup.string()
                .max(20, "do not enter more than 20 ")
                .min(3, "do not enter less than 3 ")
                .required("LastName is requierd"),
            email: Yup.string()
                .email("Invalid email address")
                .required("email is requierd"),
            password: Yup.string()
                .max(20, "password is not elligible")
                .min(6, "password should containe aat least 6 char")
                .required("password is requierd"),
            ConfirmPassword: Yup.string()
                .oneOf([Yup.ref("password")], "please enter a simillar password")
                .required("please confirm your password"),
            TypeOfUser: Yup.string()
                .max(6, "should enter either expert or novice")
                .min(6, "should enter either expert or novice")
                .required("do not miss it up"),
        }),
        handleSubmit: (values, { props, setSubmitting }) => {
            ApiService.Register({
                FirstName: values.FirstName,
                LastName: values.LastName,
                email: values.email,
                password: values.password,
                TypeOfUser: values.TypeOfUser,
            })
                .then((payload) => {
                    setSubmitting(false);
                    toast.success("register has been successfully");
                    props.loggedIn(payload);
                    persistMyInfo(payload);
                })
                .catch((err) => {
                    setSubmitting(false);
                    toast.error(
                        err.data && err.data.msg
                            ? err.data.msg
                            : "Error this email is already exist"
                    );
                });
        },
    })
)(innerForms);

此代码从寄存器组件

调用
import React, { Component } from "react";
import { EnhancedRegisterforms } from "../Forms/RegisterForms/EnhancedRegisterForms";
class Register extends Component {

  onLoggedIn = (payload) => {
    this.props.loggedIn(payload);
  };
  render() {
    return (
      <div>
        <EnhancedRegisterforms loggedIn={this.onLoggedIn} />
      </div>
    );
  }
}
export default Register;

并且在本节中,我检查要更改状态的操作类型

const initialState = {
  isAuthenticated: localStorage.getItem("id_token") ? true : false,
  id: localStorage.getItem("id"),
  token: localStorage.getItem("token"),
};

  export const authStoreState = ( state = initialState, action) => {
  switch (action.type) {
    case 'LOGGED_IN':
      return {
          isAuthenticated:true,
          id: action.payload.user._id,
          token: action.payload.token,
      };
    case 'LOGGED_OUT':
      return {
          isAuthenticated:false,
          id:undefined,
          token:undefined,
      };
    default:
      return state;
  }
};

这是商店代码

 import { createStore } from 'redux';
    import { authStoreState } from './authStore';
        export const store = createStore(
            window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
            authStoreState)

最后是我的index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import "react-toastify/dist/ReactToastify.css";
import { Provider } from "react-redux";
import { store } from "./reducers";
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);


serviceWorker.unregister();

问题是'TypeError:无法读取未定义的属性'type''

0 个答案:

没有答案