Question

所以我已经在Heroku上部署了我的应用程序，我在下面找到了网址。每当我更新数据时，我的数据就不会自动更新，通常我必须刷新页面，或者必须更新两次以显示新数据。下面是我的应用程序的网址和我的更新代码。

https://crud-application-x.herokuapp.com/getstudents

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.get('http://localhost:3200/students/student_info/'+ 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);

  })
  */
   axios.get( "https://crud-backend.herokuapp.com/students")
    .then((myJson) => {
      this.setState({student:myJson.data});
    })
    .catch(error => console.error(error));
   const student = this.props.location.state;
   console.log('===>Student to edit', student);
   const {
     _id,   role_num,
     first_name,
     last_name, marks,
   } = student;
   this.setState({ _id, role_num, first_name, last_name, marks});

}
 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 myobj = {
  _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('https://crud-backend.herokuapp.com/students/updateStudent', myobj)

.then(res=> console.log(res.data));
  this.props.history.push('/getstudents');
}

  render() {
    console.log('Student in state ===>', this.state);
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>

)
}
}

因此，我之前已经测试过该方法，并且该方法正在更新而无需刷新页面。但是由于某种原因，我不知道为什么它不再起作用了。

Answer 1

您可以采用两种方法让应用显示更新后的值。

1）您可以让POST返回一个更新的值数组，您可以使用这些值来更新您的应用程序状态，而无需发出另一个HTTP请求。

2）您可以向BE发出第二个请求，以在POST请求成功后获取数据。

axios.post('https://crud-backend.herokuapp.com/students/updateStudent', myobj)

.then(res=> console.log(res.data));
  // update state here by making a call to the BE to get the updated student vallues. 
   axios.get( "https://crud-backend.herokuapp.com/students")
    .then((myJson) => {
      this.setState({student:myJson.data});
     })
    .catch(error => console.error(error));
   }

更新而不刷新页面

1 个答案: