【发布时间】:2022-01-21 12:59:59
【问题描述】:
我正在处理一项涉及 MERN 堆栈中的简单身份验证应用程序的任务。一切都设置好了,当我从另一个文件调用 UpdateUser 函数时发生了一个问题,它没有被 React 读取/识别。此外,当我从同一个文件(即 logoutUser)导入另一个函数时,它工作得非常好。 Dashboard.js-导入函数的文件
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { logoutUser } from "../../actions/authActions";
import { UpdateUser } from "../../actions/authActions";
import classnames from "classnames";
import M from "materialize-css";
import "react-phone-number-input/style.css";
class Dashboard extends Component {
constructor() {
super();
this.state = {
age: "",
gender: "",
dob: "",
mobile: "",
errors: {},
};
this.onValueChange = this.onValueChange.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.errors) {
this.setState({
errors: nextProps.errors,
});
}
}
onChange = (e) => {
this.setState({ [e.target.id]: e.target.value });
};
onValueChange(event) {
this.setState({
selectedOption: event.target.value,
gender: event.target.value,
});
console.log(this.state.selectedOption);
}
onDateChange = (val) => {
val = val.toString();
this.setState({ dob: val });
console.log(val, typeof val);
};
onMobileChange = (value) => {
this.setState({ mobile: value });
console.log(this.state.mobile);
};
onUpdateClick = (e) => {
e.preventDefault();
const UpdatedUser = {
id: this.props.auth.user.id,
age: this.state.age,
gender: this.state.gender,
dob: this.state.dob,
mobile: this.state.mobile,
};
console.log(UpdatedUser);
this.props.UpdateUser(UpdatedUser, this.props.history);
};
onLogoutClick = (e) => {
e.preventDefault();
this.props.logoutUser();
};
componentDidMount() {
var context = this;
var options = {
defaultDate: new Date(),
setDefaultDate: true,
onSelect: function(date) {
context.onDateChange(date);
// Selected date is logged
},
};
var elems = document.querySelector(".datepicker");
var instance = M.Datepicker.init(elems, options);
// instance.open();
instance.setDate(new Date());
}
render(){
return(JSX)
}
authActions.js- 导入函数的文件
import axios from "axios";
import setAuthToken from "../utils/setAuthToken";
import jwt_decode from "jwt-decode";
import { GET_ERRORS, SET_CURRENT_USER, USER_LOADING } from "./types";
// Register User
export const registerUser = (userData, history) => (dispatch) => {
axios
.post("/api/users/register", userData)
.then((res) => history.push("/login"))
.catch((err) =>
dispatch({
type: GET_ERRORS,
payload: err.response.data,
})
);
};
//Update User
export const UpdateUser = (userData, history) => (dispatch) => {
axios
.post("/api/users/update", userData)
.then((res) => history.push("/login"))
.catch((err) =>
dispatch({
type: GET_ERRORS,
payload: err.response.data,
})
);
};
// Login - get user token
export const loginUser = (userData) => (dispatch) => {
axios
.post("/api/users/login", userData)
.then((res) => {
// Save to localStorage
// Set token to localStorage
const { token } = res.data;
localStorage.setItem("jwtToken", token);
// Set token to Auth header
setAuthToken(token);
// Decode token to get user data
const decoded = jwt_decode(token);
// Set current user
dispatch(setCurrentUser(decoded));
})
.catch((err) =>
dispatch({
type: GET_ERRORS,
payload: err.response.data,
})
);
};
// Set logged in user
export const setCurrentUser = (decoded) => {
return {
type: SET_CURRENT_USER,
payload: decoded,
};
};
// User loading
export const setUserLoading = () => {
return {
type: USER_LOADING,
};
};
// Log user out
export const logoutUser = () => (dispatch) => {
// Remove token from local storage
localStorage.removeItem("jwtToken");
// Remove auth header for future requests
setAuthToken(false);
// Set current user to empty object {} which will set isAuthenticated to false
dispatch(setCurrentUser({}));
};
还要补充一点,当我直接调用函数而不是使用 this.props.UpdateUser 时,它被 React 识别并且错误也消失了,但函数的内容是不执行。 请帮助我没有太多时间提交此项目。
【问题讨论】:
-
this.props.UpdateUser与UpdateUser不同。 -
无关,但很重要:您使用了多种命名约定,这让代码的读者非常困惑。一般来说,最好在命名上保持一致,即使它不是常规模式。
-
我没有看到您将组件连接到 Redux 存储和任何地方的操作。您是否只是在帖子中省略了该代码,还是您的代码根本没有这样做?
-
@Lennholm 我已经从帖子中省略了该代码。
-
@DaveNewton 我明白了...感谢您的反馈。
标签: javascript reactjs redux axios mern