从表/列表中动态删除项目

Question

我有这个删除方法，效果很好，但是它不能动态地从列表中删除项目，但是需要我重新加载页面才能看到结果。

删除方法

  deleteRevision = (id) => {
    alert("Are you sure you want to delete {revisionID} ?")
    console.log(id)
    axios.delete("http://localhost:8080/lagbevakning/revision/delete?id=" + id)
  }

我的表格方法

  finishedRevisionsList = () => {
    return(
      <div>
          <Table celled>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>  Status      </Table.HeaderCell>
                  <Table.HeaderCell>  Skapad      </Table.HeaderCell>
                </Table.Row>
              </Table.Header>

          {this.state.data.map((item, i) => (
                <Table.Body key={item.id}>
                  <Table.Row>
                    <Table.Cell>{item.status}</Table.Cell>
                    <Table.Cell> 
                          <i className="far fa-trash-alt" onClick={this.deleteRevision.bind(this, item.id)}></i>
                    </Table.Cell>
                  </Table.Row>
                </Table.Body>
          ))}
          </Table>
      </div>
    )
  }

渲染

    render() {
        return (
          <div>
           {this.finishedRevisionsList()}
          </div>
        )
      }

关于如何使此表更具动态性的任何建议？

Answer 1

您的deleteRevision方法仅向后端发送DELETE请求，但不更新组件状态。

您可以从id中过滤出具有给定data的项目。

deleteRevision = id => {
  axios.delete("http://localhost:8080/lagbevakning/revision/delete?id=" + id);

  this.setState(({ data }) => ({
    data: data.filter(item => item.id !== id)
  }));
}

Answer 2

删除后，您应该更改数据阵列的状态。

Answer 3

从this.state.data中删除元素之后，必须将新数据设置为state（没有删除的元素）

类似的东西

this.setStete((prevState) => {
  data: prevState.data.filter(item => item.id !== id);
);