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

Question

我很难更新表，它只在刷新时更新我不知道我哪里出错了，它只是以这种方式发生，我试图调试它，但它读取数据，但它只在刷新时更新

 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

这可能会解决问题。您在控制台.log语句之后使用 return 语句，该语句阻止代码的执行，并且不使用 jsonReturnValue.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
    })
  }
})
}

然后在更新中将其调用到您的点击

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({})
}