Обновить данные при использовании удаленных данных после пользовательских действий?

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 состояние, которое очень ограничивает:(