Question

我有一个自定义操作，该操作正在对后端进行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");
                      }
                    });
                  }
                }

Answer 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
                ref={this.tableRef}
                columns={this.state.columns}
                data={this.state.data}
                title="Demo Title"             
              />
          <button
            onClick={() => {
              this.tableRef.current.onQueryChange();
            }}
          >
            ok
          </button>
        </div>
    );
  }
}

Answer 2

我设法通过基本上取消对表的装订来重新渲染表。这是一个示例：

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状态下获取的，这是非常有限的：（

自定义操作后使用远程数据时是否更新数据？

2 个答案: