javascript - 如何在reactjs中使用AJAX单击时重新加载表格

Question

我想知道如何仅重新加载表格，而不是整个页面的 react 。我尝试过使用 history.go(0); 但是，它会重新加载整个页面，请检查如何重新加载它，如果我要使用forceUpdate，根据研究，您应该避免使用它。我正在尝试做一个 AJAX，但我不知道该放什么放在哪里......它与 php 有很大不同......

我的 onclick 代码

 handleSubmit( name, address,department){

 const laman = {
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
    return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(laman)
    })
    .then(function(response) {
      console.log(response)
      return response.json();
    })
    .then(function (result) {
      history.go(0);
    })
    .catch(function(error) {
      console.log(error);

    })
}

这是 onclick 按钮加上表格本身的代码

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">ADD  Employee</h4>
            </div>
<form>

        <div className="container">
          <div className="modal-body">
              <table> 
              <tbody>
              <tr>
              <td>Name</td>
              <td>
              <input type="text"
                    ref="Employee_Name"
                    onChange={(e) => this.handleChange(e, "Employee_Name")}
                    required
                    /> 
              </td>
              </tr>
              <tr>
              <td>Address</td>
              <td>
               <input type="text"
                     ref="Address"
                    onChange={(e) => this.handleChange(e, "Address")}
                    required
                     />
              </td>
              </tr>
              <tr>
              <td>Department</td>
              <td>
               <input type="text"

                      onChange={(e) => this.handleChange(e, "Department")}
                      required
              /> 
              </td>
              </tr>
              </tbody>
              </table>

          </div>
          </div>
          <div className="modal-footer">
            <input type="button" className="btn btn-info"disabled={!isEnabled} 
                    onClick = { this.handleSubmit.bind(
                                this, this.state.Employee_Name,
                                this.state.Address,
                                this.state.Department)
                                 }
                               value =" Add Employee"
                               data-dismiss="modal"/>
            <button type="button" className="btn btn-default" data-dismiss="modal" >Close</button>
          </div>

            </form>

PS:它也在同一页面..我不知道如何调用它的原因

Answer 1

由于您是基于 state jsonReturnedValue 构建表，因此除了将新添加的值附加到此状态之外，您无需执行任何额外操作，因为 React 将自动只负责更新更改

将handleSubmit函数更改为

handleSubmit( name, address,department){

 const laman = {
      'Employee_Name': name,
      'Address': address,
      'Department': department
    }
    return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(laman)
    })
    .then(function(response) {
      console.log(response)
      return response.json();
    })
    .then((result)=> {
       var jsonReturnedValue = [...this.state.jsonReturnedValue];
       jsonReturnedValue.push(laman);
       this.setState({jsonReturnedValue})
    })
    .catch(function(error) {
      console.log(error);

    })
}