javascript - 未捕获的 TypeError : Cannot read property 'setState' of undefined at handleChange , 无法在handleSubmit 处读取 null 的属性 'props'

Question

我是react-redux堆栈的新手，我正在学习基础知识，我现在陷入困境。我想将表单数据保存在 mongodb 中，但没有任何反应。我收到这两个错误，请帮助如何将这些表单数据插入数据库。在此先感谢

这是我的 form.js 页面。我从这里将数据发送到action.js页面，然后发送到server.js，然后发送到controller.js，我在其中导入模型并尝试保存数据。

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import Messages from '../Messages';
import classnames from 'classnames';
import saveBasicUser  from '../../actions/basicAction';


class BasicUser extends React.Component {

  constructor(props) {

      super(props);


      this. state = {

            username : '',
            address : '',
            phone : '',
            date : '',
            billing : ''



           }
      }



  handleChange (e) {

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

  }



  //========================================================================

  handleSubmit(e) {


    e.preventDefault();

    this.props.saveBasicUser({ username, address, phone, date, billing });


  }

  //========================================================================


  render() {


    var divStyle = {
      padding: '16',
    };





    return (
      <div className="container ca-container">

        <div className="row">
          <div className="col-md-12">
              <h1> ADD basic USER</h1>

            <hr/>

            </div>
            </div>




          <form onSubmit={this.handleSubmit}>

          <label > Name : </label> 



          <input className= "form-control"  id = "username" name = "username" value={this.state.username}
                      onChange={this.handleChange}  />

          <label > address : </label> 


          <input className= "form-control" id = "address"  name = "address" value={this.state.address}
                      onChange={this.handleChange} />

          <label > Phone No: : </label> 


          <input className= "form-control"  id = "phone" name = "phone" value={this.state.phone}
                      onChange={this.handleChange}/>

          <label > Subscription date : </label> 


          <input className= "form-control" id = "date"  name = "date" type ="date" value={this.state.date}
                      onChange={this.handleChange}/>

          <label > Billing : </label> 


          <input className= "form-control" name = "billing" id = "billing" value={this.state.billing}
                      onChange={this.handleChange}/>

          <hr />           

          <button type="submit" value= "submit" className="btn btn-success btn-lg">Submit</button>

          </form>


          </div>


    );
  }
}


export default connect (null , {saveBasicUser})(BasicUser);

Answer 1

将这两行放入构造函数中。我认为你没有使用 babel 或其他东西，这就是你不能使用箭头的原因。

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this;