Я создаю компонент формы регистрации для веб-приложения, используя React и Redux. Однако он правильно отображает, когда я нажимал на кнопку отправки, данные (имя, адрес электронной почты, пароль) не регистрировались в MongoDB. Если я использую Postman для публикации на сервере localhost, он будет работать нормально.
Изначально я использовал компонент класса, но я изменил его на функциональный компонент, чтобы использовать @ material-ui и hooks.
import React, { useState } from "react";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import Logo from "./assets/images/logo_transparent.png";
//redux
import { connect } from "react-redux";
//proptypes
import PropTypes from "prop-types";
import { register } from "./actions/authActions";
const useStyles = makeStyles(theme => ({
"@global": {
// insert style inside here
}));
function SignUp() {
const classes = useStyles();
const [form, setValues] = useState({
name: "",
email: "",
password: "",
msg: null
});
const propTypes = {
isAuthenticated: PropTypes.bool,
error: PropTypes.object.isRequired,
register: PropTypes.func.isRequired
};
const onChange = e => {
setValues({
...form,
[e.target.name]: e.target.value
});
};
const onSubmit = e => {
e.preventDefault();
const { name, email, password } = setValues();
//create user object
const newUser = {
name,
email,
password
};
//attempt to register
propTypes.register(newUser);
};
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar
alt="logo"
src={Logo}
style={{
width: 100,
height: 100
}}
/>
<form className={classes.form} noValidate>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
autoComplete="fname"
name="fullName"
variant="outlined"
required
fullWidth
id="fullName"
label="Full Name"
autoFocus
onChange={onChange}
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
value={form.email}
onChange={onChange}
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
name="password"
label="Password"
type="password"
autoComplete="current-password"
value={form.password}
onChange={onChange}
/>
</Grid>
<Grid item xs={12} />
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onSubmit={onSubmit}
>
Sign Up
</Button>
<Button
fullWidth
variant="contained"
color="primary"
className={classes.home}
>
Home
</Button>
<br />
<br />
<Grid container justify="flex-end">
<Grid item>
<Link href="http://localhost:3000/" variant="body2">
Already have an account? Sign in
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={5}>
</Box>
</Container>
);
}
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated,
error: state.error //getting from reducer
});
export default connect(
mapStateToProps,
{ register } //from redux actions //mapdispatchtoprop
)(SignUp); //component
// authActions.js
import axios from "axios";
import { returnErrors } from "./errorActions";
import {
USER_LOADING,
USER_LOADED,
AUTH_ERROR,
LOGIN_SUCCESS,
LOGIN_FAIL,
LOGOUT_SUCCESS,
REGISTER_SUCCESS,
REGISTER_FAIL
} from "./types";
//check token and load user
export const loadUser = () => (dispatch, getState) => {
//User loading
dispatch({ type: USER_LOADING });
axios
.get("/api/auth/user", tokenConfig(getState))
.then(res =>
dispatch({
type: USER_LOADED,
payload: res.data
})
)
.catch(err => {
dispatch(returnErrors(err.response.data, err.response.status));
dispatch({
type: AUTH_ERROR
});
});
};
//register user
export const register = ({ name, email, password }) => dispatch =>
{
//headers
const config = {
headers: {
"Content-Type": "application/json"
}
};
//request body
const body = JSON.stringify({ name, email, password });
axios
.post("api/users", body, config)
.then(res =>
dispatch({
type: REGISTER_SUCCESS,
payload: res.data
})
)
.catch(err => {
dispatch(
returnErrors(err.response.data, err.response.status,
"REGISTER_FAIL")
);
dispatch({
type: REGISTER_FAIL
});
});
};
//setup config/headers and token
export const tokenConfig = getState => {
//get token from localstorage
const token = getState().auth.token;
//headers
const config = {
headers: {
"Content-type": "application/json"
}
};
//if token, add to headers
if (token) {
config.headers["x-auth-token"] = token;
}
return config;
};
store.js
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__
? window.__REDUX_DEVTOOLS_EXTENSION__()
: f => f
)
);
export default store;