Question

所以我有一个更新表格，我想预先填充它。我也想执行update方法。关于如何解决该问题，我遇到了一些问题。在下面，我有一个屏幕截图，后端和前端代码

second.post('/student_info',(req,res)=>{
  const student_id = req.body._id;
  db.collection('students').find({"_id" : ObjectID(student_id)}).toArray((err,result) =>

 {
        if(!err) {
           res.send(result);
        } else {
            console.log(err);
        }

      });
second.post('/students/updateStudent', (req, res) => {
   try {
    db.collection('students').updateMany( {"_id" : ObjectID(req.body._id)},
      { $set: { role_num:req.body.role_num, first_name: req.body.first_name, last_name: req.body.last_name, marks: req.body.marks}});
 } catch (e) {
  console.log(e);
 }
    res.send('student updated');
 });

现在前端

import React, {Component} from 'react';
import './App.css';
import axios from 'axios';
export default class EditStudent extends Component {
constructor(props) {
  super(props)
  this.ChangeID = this.ChangeID.bind(this);
  this.ChangeRoleNumber = this.ChangeRoleNumber.bind(this);
  this.ChangeFirstName= this.ChangeFirstName.bind(this);
  this.ChangeLastName = this.ChangeLastName.bind(this);
  this.ChangeMarks = this.ChangeMarks.bind(this);
  this.Enter =  this.Enter.bind(this);

  this.state = {
     _id: '',
     role_num: '',
     first_name: '',
     last_name: '',
     marks: ''

  }
}
componentDidMount() {
axios.post('http://localhost:3200/students/student_info', {
  '_id': this.props.match.params.id
})
.then(res => {
              this.setState({
                _id: res.data._id,
                role_num: res.data.role_num,
                first_name: res.data.first_name,
                 last_name: res.data.last_name,
                 marks: res.data.marks
               });
          })
          .catch(err => {
              console.log(err);

   })
}
 ChangeID(a) {
 this.setState({
   _id: a.target.value
 })
}

ChangeRoleNumber(a) {
  this.setState({
    role_num: a.target.value
  })
}

ChangeFirstName(a) {
  this.setState({
    first_name: a.target.value
  })
}
ChangeLastName(a) {
  this.setState({
    last_name: a.target.value
  })
}
ChangeMarks(a) {
  this.setState({
    marks: a.target.value
  })
}
Enter(a) {
a.preventDefault();

const myob = {
  _id: this.state._id,
  role_num: this.state.role_num,
  first_name: this.state.first_name,
  last_name: this.state.last_name,
  marks: this.state.marks

};
axios.post('http://localhost:3200/students/updateStudent',  {
  '_id':this.props.match.params.id ,
  myob
})
.then(err => console.log(err.data));
  this.props.history.push('/getstudents');
}

  render() {
return(
  <div style={{marginTop:50}}>
      <h2>Update Student</h2>
      <form onSubmit={this.Enter}>
        <div className = 'form-group'>
           <label>Enter ID: </label>
           <input type = "text" className ='form-control' value= {this.state._id} onChange={this.ChangeID}
           />

          </div>
          <div className = 'form-group'>
             <label>Enter Role Number: </label>
             <input type = "text" className ='form-control'  value= {this.state.role_num} onChange={this.ChangeRoleNumber} />
            </div>
            <div className = 'form-group'>
               <label>Enter First Name : </label>
               <input type = "text" className ='form-control'value= {this.state.first_name} onChange={this.ChangeFirstName}/>
              </div>
              <div className = 'form-group'>
                 <label>Enter Last Name: </label>
                 <input type = "text" className ='form-control'value= {this.state.last_name} onChange={this.ChangeLastName}/>
                </div>
                <div className = 'form-group'>
                   <label>Enter Marks: </label>
                   <input type = "text" className ='form-control'value= {this.state.marks} onChange={this.ChangeMarks}/>
                  </div>
                  <div className = 'form-group'>
                     <input type = "submit" className ='btn btn-primary'value= "Edit Student"/>
                    </div>

      </form>

  </div>

)
}
}

因此，我在jquery中使用了此前端数据，并且我在student_info上发布了文章，因此我可以预先填充前端中的字段，但是我不知道为什么它没有预先填充。同样，当我输入要更改的数据时，以及单击“编辑学生”时，我输入的数据都将为空。

Answer 1

我认为服务器配置中的某些内容使您的选项失败，我可以看到404，与Cors相关的内容，您应该首先检查此错误。

如何在ReactJS中更新和预填充表单

1 个答案: