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

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

2 голосов
/ 11 апреля 2019

У меня есть специальное действие, которое выполняет 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");
                      }
                    });
                  }
                }

Ответы [ 2 ]

0 голосов
/ 13 мая 2019

Мне удается повторно визуализировать таблицу, в основном отключая ее. Вот пример: 

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

0 голосов
/ 11 апреля 2019

Вы можете использовать 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>
    );
  }
}
...