Question

我是反应 - 还原堆栈的新手，我正在学习基本的，我现在被卡住了。我想在mongodb中保存表单数据，但没有任何讨价还价。我收到这两个错误，plaese帮助如何将这些表单数据插入数据库。谢谢avdance

这是我的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

您必须将handleChange和handleSubmit个功能绑定到BasicUser，其他this将undefined handleChange = e => { this.setState({ [e.target.name]: e.target.value }); } handleSubmit = e => { e.preventDefault(); this.props.saveBasicUser({ username, address, phone, date, billing }); }。有很多方法可以做到，但在你的情况下最简单的方法是使用函数作为类属性（使用箭头函数来保留类范围）。

render()

此语法由ES7提供，您可能需要this babel plugin才能使用它。

如果您不想安装插件，另一种简单的方法是使用<input onChange={e => this.handleChange(e)} />内的箭头功能：

Home

Answer 2

将这两行放在构造函数中。你不是在使用babel，也不是为什么你不能使用箭头。

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

未捕获的TypeError：无法在handleChange读取未定义的属性'setState'，无法在handleSubmit中读取null的属性'props'

2 个答案: