CRUD操作后如何在react js中re-render/update table？

Question

我使用了简单的 table（代码附加在下面）并尝试查找许多参考资料，但找不到适合我的问题的解决方案。 table 显示正常，但是当添加、更新或删除任何数据时问题就开始了。除非刷新页面，否则它不会反映出来。我尝试过的几种方法是更新状态但没有帮助。我什至尝试过强制更新组件，但没有成功。我什至尝试渲染组件。

<div className="table">
  <table className="table table-striped table-padding">
    <thead>
      <tr className="heading">
        <th className="col-md-2">Image</th>
        <th className="col-md-3">Office Name</th>
        <th className="col-md-5">Address</th>
        <th className="col-md-1"></th>
        <th className="col-md-1"></th>
      </tr>
    </thead>
    <tbody>
      {
        (this.state.dataUpdated) &&
          this.state.data.map((list, index) => {
            return (
              <tr key={index}>
                <td><img style={{height: '30px', width: '30px'}} src={list.imageData} alt="icon"/></td>
                <td>{list.name}</td>
                <td>{list.address}</td>
                <td><button type="button" onClick={(e) => this.handleEdit(list.officeId)}><i className="fa fa-pencil" aria-hidden="true"></i></button></td>
                <td><button type="button" onClick={(e) => this.handleDelete(list.officeId)}><i className="fa fa-trash" aria-hidden="true"></i></button></td>
              </tr>
            )

          })
        }
      </tbody>
   </table>
</div>

handleEdit(id) {
  this.state.data.map(row => {
    if(row.officeId === id) {
      return (
        this.setState({ displayData: row })
      )
    }
  });
  this.displayOfficeList();
}

handleDelete(id) {
  const { dispatch } = this.props;
  dispatch(commonActions.deleteOffice(id));
  this.displayOfficeList();
}

displayOfficeList() {
  this.toggleFlag();
  commonServices.getOfficeList().then((res) => {
    let demo = res;
    this.setState({ data: demo.content});
    this.setState({ dataUpdated: true});
  });
}

Answer 1

每次执行添加、编辑和删除等操作时，您都需要更新数据状态。

使用componentWillReceiveProps，参考下面link

您可以在这里找到官方文档https://reactjs.org/docs/state-and-lifecycle.html

还有 https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0

Answer 2

工作正常。在添加/更新或删除条目的响应之前错误地调用 API 来显示列表。最重要的是，如果状态得到更新，组件会重新呈现自己。只需要小心，不要像我一样弄乱 API 电话。

CRUD操作后如何在react js中re-render/update table？

How to re-render/update the table in react js after CRUD operations?

html-table

crud

rerender

page-refresh

reactjs