我正在与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''