如何在不刷新 reactjs 的情况下更新、重新加载和 ajax table

Question

我很难更新 table 它只在刷新时更新我不知道我哪里出错了它只是碰巧我尝试调试它但它读取数据但它只在刷新时更新

 handleUpdate(id, name, address,department,idx){ 

debugger
    const data = {
      'Employee_ID': id,
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
return fetch('http://localhost:5118/api/employeedetails/PutEmployeeDetail/'+id, {
       method: 'POST',
       headers: {'Content-Type': 'application/json'},
       body: JSON.stringify(data) })
      .then(function(response) {
      console.log(response)
        return response.json();
         this.forceUpdate();
          var jsonReturnedValue = [...this.state.jsonReturnedValue];
        jsonReturnedValue.setState({data:response});
        this.setState({jsonReturnedValue})

      })
      .then((result)=> {    
       })
      .catch(function(error) {
        console.log(error);
      }) 

}

Answer 1

这可能会解决问题。您在 console.log 语句之后使用了 return 语句，这会阻止代码的执行并且不使用 jsonReturnedValue.setState({data:response});

handleUpdate(id, name, address,department,idx){ 

debugger
    const data = {
      'Employee_ID': id,
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
       return 
       fetch('http://localhost:5118/api/employeedetails/PutEmployeeDetail/'+id, 
       {
       method: 'POST',
       headers: {'Content-Type': 'application/json'},
       body: JSON.stringify(data) })
      .then(function(response) {
      console.log(response)
        this.forceUpdate();
        var jsonReturnedValue = [...this.state.jsonReturnedValue];
        this.setState({jsonReturnedValue});
        return response.json();

      })
      .then((result)=> {    
       })
      .catch(function(error) {
        console.log(error);
      }) 

}

Answer 2

根据我的理解如何ajax 首次安装

npm i jquery -s

然后导入 jQuery

Import $ from 'jQuery';

然后在您的 componentDidMount 中执行 ajax 并执行与您的 componentDidMount

类似的功能

componentDidMount() {
  $.ajax({
  url:'http://localhost:5118/api/employeedetails/getemployeedetails/',
  success:(data)=>{
    this.setState({
      jsonReturnedValue:data
    })
  }
})
}

类似这样的东西

restartFunc(){
   $.ajax({
  url:'http://localhost:5118/api/employeedetails/getemployeedetails/',
  success:(data)=>{
    this.setState({
      jsonReturnedValue:data
    })
  }
})
}

然后将它调用到更新中的 onclick

handleUpdate(id, name, address,department,idx){ 
    const data = {
      'Employee_ID': id,
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
return fetch('http://localhost:5118/api/employeedetails/PutEmployeeDetail/'+id, {
       method: 'POST',
       headers: {'Content-Type': 'application/json'},
       body: JSON.stringify(data) })
      .then(function(response) {
      })
       .then((result)=> {   
           this.restartFunc()
       })
      .catch(function(error) {
        console.log(error);
      }) 
this.setState({})
}

如何在不刷新 reactjs 的情况下更新、重新加载和 ajax table

how can I update, reloads and ajax the table without refreshing reactjs

javascript

ajax

crud

reactjs