2

我有一个自定义操作正在对我的后端进行 API 调用以从我的数据库中删除数据，这反过来又会从数据库中删除正在显示的项目。运行此操作时，如何获取要更新的表数据？

这是来自材料表问题#457。

我最初想尝试使用 setState 更改重新渲染组件，但这似乎不起作用。（我可以看到状态发生了相应的变化，但表永远不会再次获取数据）

  {
                  icon: "delete",
                  tooltip: "Delete Partner",
                  onClick: (event, rowData) => {
                    console.log(rowData);
                    let data = {
                      entityId: rowData[0].entityId
                    };
                    fetch("/deleteEntity", {
                      method: "POST",
                      headers: {
                        "Content-Type": "application/json"
                      },
                      body: JSON.stringify(data)
                    }).then(response => {
                      if (response.status === 204) {
                        let index = currentSelectedRows.findIndex(
                          x => x.entityId === rowData[0].entityId
                        );
                        currentSelectedRows.splice(index, 1);
                        this.setState({ currentSelected: currentSelectedRows });
                        console.log("Partner Deleted");
                      } else if (response.status === 500) {
                        console.log("Something went wrong");
                      }
                    });
                  }
                }
4

2 回答 2

1

您可以使用 tableRef 并手动调用 onQueryChange。在此示例中，按钮调用表函数。您可以在任何操作中调用它：

class App extends Component {
  tableRef = React.createRef();

  state = {
      // set your initial data and columns here
  }

  render() {
    return (     
        <div style={{ maxWidth: '100%' }}>
              <MaterialTable
                tableRef={this.tableRef}
                columns={this.state.columns}
                data={this.state.data}
                title="Demo Title"             
              />
          <button
            onClick={() => {
              this.tableRef.current.onQueryChange();
            }}
          >
            ok
          </button>
        </div>
    );
  }
}
于 2019-04-11T19:36:39.303 回答
0

我设法通过基本上取消表格来重新渲染表格。这是一个例子：

class MyStateComp extends React.Component {
  state = { loading: false }

  handleDelete = (event, rowData) => {
    this.setState({ loading: true })
    simulateAsyncDelete(event, rowData)
      .then(() => this.setState({loading: false}))
  }

  render() {
    loading
    ? <div>loading...</div>
    : <MaterialTable
        {/* other props */}
        actions={[
          {
            icon: 'delete',
            tooltip: 'Delete User',
            onClick: this.handleDelete
          }
        ]}
    />
  }
}

我试图强制更新this.forceUpdate但它没有用，我的猜测是数据是在componentDidMount非常有限的状态下获取的:(

于 2019-05-13T02:27:34.627 回答