Question

import React, {Component} from "react";
import {connect} from "react-redux";
import PropTypes from "prop-types";
import "../App.css";
import {register} from "../actions/authActions"

class Register extends Component {

    state = {
      username: "",
      email: "",
      password: "",
      msg:null
    };

    static propTypes={
      isAuthenticated: PropTypes.bool,
      error: PropTypes.object.isRequired,
      register: PropTypes.func.isRequired
    };

    componentDidUpdate(previousProps){
      const {error} = this.props;
      if(error !== previousProps.error) {
        //Check for register error
        if(error.id === "REGISTER_FAIL") {
          this.setState({msg: error.msg.msg});
        } else {
          this.setState({msg: null});
        }
      }
    }

    onChange = e =>{
      this.setState({ [e.target.name]: e.target.value});
    };

    onSubmit(e){
      e.preventDefault();

      const { username, email, password} = this.state;

      //Create User Obj
      const newUser = {
        username,
        email,
        password
      };

      //Attempt Register
      this.props.register(newUser);

    }

  
  
  render() {
    return (
      <div>
      {this.state.msg ? (alert(this.state.msg)): null}
      <form onSubmit={this.onSubmit}>
      <div className="container-register">
        <div className="container-form">
          <div className="form">
            <h1>Register</h1>
            <p>Please enter your information before you dive in to discussions.</p>

            <div className="form-group">
              <label for="email">Email</label>
              <br/>
              <input type="text" placeholder="myemail@email.com" name="email" id="email" onChange={this.onChange} />
            </div>

            <div className="form-group">
              <label for="username" >Username</label>
              <br/>
              <input type="text" placeholder="MyUniqueUsername" name="username" id="username" onChange={this.onChange} />
            </div>

            <div className="form-group">
              <label for="Password">Password</label>
              <br/>
              <input type="password" placeholder="Enter Password" name="password" id="password" onChange={this.onChange} />
            </div>

            <div className="form-group">
              <br/>
              <button type="submit">Register Me!</button>
            </div>

          </div>
        </div>
      </div>
      </form>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated,
  error: state.error
});

export default connect(mapStateToProps, {register})(Register);

你好，我试图通过使用react和react-redux注册我的电子邮件，用户名，密码。我在使用axios 返回节点+ expressjs。我不断得到这个，不知道为什么。从我的注册功能，我使用axios.post到我的后端。（传递我的令牌和用户数据进行注册）。

任何想法这有什么问题吗？

Answer 1

您似乎忘记了将this上下文绑定到onSubmit方法，可以通过编写箭头函数来实现此目的，而不必绑定到此方法：

onSubmit = (e) => {
 // it should work 
 const { username, email, password} = this.state;
}

React Redux-无法读取未定义的属性“状态”

1 个答案: