【问题标题】:Function is not getting read in reactJs even after proper import即使在正确导入后,也没有在 reactJs 中读取函数
【发布时间】: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.UpdateUserUpdateUser 不同。
  • 无关,但很重要:您使用了多种命名约定,这让代码的读者非常困惑。一般来说,最好在命名上保持一致,即使它不是常规模式。
  • 我没有看到您将组件连接到 Redux 存储和任何地方的操作。您是否只是在帖子中省略了该代码,还是您的代码根本没有这样做?
  • @Lennholm 我已经从帖子中省略了该代码。
  • @DaveNewton 我明白了...感谢您的反馈。

标签: javascript reactjs redux axios mern


【解决方案1】:

您的导入都不会在此文件中执行任何操作。他们永远不会被调用。调用的是类似的函数,它们作为来自某个父组件的 props 传递给该组件。在您的父组件中,您传递了logoutUser,但忘记传递updateUser。找到导入logoutUser的根文件,添加updateUser

【讨论】:

    猜你喜欢
    • 2020-06-05
    • 2019-12-16
    • 1970-01-01
    • 1970-01-01
    • 2017-03-06
    • 2020-06-15
    • 2019-05-14
    • 2016-06-15
    • 2022-01-20
    相关资源
    最近更新 更多