Javascript 如何在reactjsput方法中使用AJAX单击时重新加载表

我想知道如何只重新加载表，而不是整个页面。我已尝试使用历史记录。go（0）；但是，它会重新加载整个页面请检查我如何重新加载它，如果我要使用forceUpdate，根据研究，您应该避免使用它。我正在尝试做一个AJAX，但我不知道该把它放在哪里。。。它与php有很大不同

我的onclick代码

handleUpdate(id, name, address,department){ 

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();
})
.then((result)=> {
  var jsonReturnedValue = [...this.state.jsonReturnedValue]; 

  jsonReturnedValue[data].Department = department,
  jsonReturnedValue[data].Employee_name = name,
  jsonReturnedValue[data].Address = address
  this.setState({jsonReturnedValue})
})
.catch(function(error) {
  console.log(error);

})

}

渲染和表的代码

render() {
     const isEnabled = this.canBeSubmitted();
    let {jsonReturnedValue} = this.state;
  return(
    <div>
        <div className="container">   
          <h1> Listof Employees </h1>
            <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
             <table className= "table table-bordered" id="result"> 
                <tbody>
                 <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Address</th>
                      <th>Update</th>
                      <th>Delete</th>
                 </tr>
                    {jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
                </tbody>

            </table>
          </div>

      {/*Updating*/}

    <div className="modal fade" id="UpdateEmployee" role="dialog">
           <div className="modal-dialog">
             <div className="modal-content">
                <div className="modal-header">
                   <button type="button" className="close" data-dismiss="modal">&times;</button>
                  <h4 className="modal-title">Update Employee</h4>
            </div>
            <form > 
              <div className="container"> 
              <div className="modal-body"> 
              <table> 
              <tbody> 
              <tr> 
              <td>Name</td> 
              <td> 
              <input  type="text" 
                      name="Employee_Name"
                      value={this.state.Employee_Name} 
                      required
                      onChange={(e) => this.handleChange(e, "Employee_Name")}/> 
              </td> 
              </tr> 
              <tr> 
              <td>Address</td> 
              <td> 
              <input  type="text" 
                      name="Address" 
                      value={this.state.Address} 
                      required
                      onChange={(e) => this.handleChange(e, "Address")}/> 
              </td> 
              </tr> 
              <tr> 
              <td>Department</td> 
              <td> 
              <input  type="text" 
                      name='Department' 
                      value={this.state.Department} 
                      required
                      onChange={(e) => this.handleChange(e, "Department")}/> 

              </td> 
              </tr> 
              </tbody> 
              </table> 
              </div> 
              </div> 
              <div className="modal-footer"> 
              <input type="button" className="btn btn-info"   disabled={!isEnabled}  onClick = { this.handleUpdate.bind(this,  this.state.Employee_ID , this.state.Employee_Name ,this.state.Address ,this.state.Department)} value =" Update Employee" data-dismiss="modal"/> 
              <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> 
              </div> 
              </form>
            </div>
          </div>
    </div>

render（）{
const isEnabled=this.canbesubmited（）；
让{jsonReturnedValue}=this.state；
返回(
雇员名单
添加员工
身份证件
名称
地址
更新
删除
{jsonReturnedValue.map（（d，i）=>this.renderItem（d，i））}
{/*正在更新*/}
&时代；
更新员工
名称
this.handleChange（e，“员工姓名”）}/>
地址
this.handleChange（e，“地址”）}/>
部门
this.handleChange（e，“部门”）}/>
接近

jsonReturnedValue

应使用

索引，而不是
对象
。使用
findIndex
获取数组中具有
员工ID=ID
的对象的索引

handleUpdate(id, name, address,department){ 

    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();
    })
    .then((result)=> {
      var jsonReturnedValue = [...this.state.jsonReturnedValue]; 
      var idx = jsonReturnedValue.findIndex((val) => val.Employee_ID == id)
      jsonReturnedValue[idx].Department = department,
      jsonReturnedValue[idx].Employee_name = name,
      jsonReturnedValue[idx].Address = address
      this.setState({jsonReturnedValue})
    })
    .catch(function(error) {
      console.log(error);

    })

}

当我调试它时，代码正在读取值，但它不会改变表，除非我刷新它如果你设置状态，它应该会更新视图我不知道发生了什么…有时它会更新，有时它不会，不应该是这种情况这似乎是你前面一个问题的两个副本中的第二个，正如我所指出的，你你的问题也在别处重复了。