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

【问题标题】：React redux - Cannot read property 'state' of undefinedReact redux - 无法读取未定义的属性“状态”
【发布时间】：2020-08-31 15:11:34
【问题描述】：

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 到我的后端。（传递我的令牌和用户数据进行注册）。

你知道这有什么问题吗？

【问题讨论】：

构造函数(props) { super(props); this.onSubmit = this.onSubmit.bind(this); }

标签： javascript reactjs redux react-redux

【解决方案1】：

您似乎忘记将 this 上下文绑定到 onSubmit 方法，您可以通过在箭头函数中编写而不绑定到 this 来做到这一点：

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

【讨论】：