Как мне добиться оптимистичного рендеринга с удаленными данными с использованием таблицы материалов?

Question

Я использую таблицу материалов библиотеки для таблиц данных в моем приложении. Я устанавливал реквизит данных для использования данных из this.state.data, и добавление строк обновляло бы мою таблицу с помощью setState. Но после переключения на удаленные данные таблица не обновляется после добавления строки. Есть ли другой способ добиться этого с помощью удаленных данных?

import React, {Component} from "react";
import MaterialTable from "material-table";
import Add from "@material-ui/icons/Add";
import Clear from "@material-ui/icons/Clear";
import Check from "@material-ui/icons/Check";
import Edit from "@material-ui/icons/Edit";
import FirstPage from "@material-ui/icons/FirstPage";
import ChevronRight from "@material-ui/icons/ChevronRight";
import LastPage from "@material-ui/icons/LastPage";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import Search from "@material-ui/icons/Search";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  state = {
    data: []
  }
  render() {
  return (
    <MaterialTable
      columns={[
        {
          title: "Avatar",
          field: "avatar",
          render: rowData => (
            <img
              style={{ height: 36, borderRadius: "50%" }}
              src={rowData.avatar}
            />
          )
        },
        { title: "Id", field: "id" },
        { title: "First Name", field: "first_name" },
        { title: "Last Name", field: "last_name" }
      ]}
      icons={{
        Add: () => <Add />,
        Check: () => <Check />,
        Clear: () => <Clear />,
        Edit: () => <Edit />,
        FirstPage: () => <FirstPage />,
        NextPage: () => <ChevronRight />,
        LastPage: () => <LastPage />,
        PreviousPage: () => <ChevronLeft />,
        ResetSearch: () => <Clear />,
        Search: () => <Search />
      }}

      // If this is an array from state(ie. this.state.data) then it works.
      data={query =>
        new Promise((resolve, reject) => {
          let url = "https://reqres.in/api/users?";
          url += "per_page=" + query.pageSize;
          url += "&page=" + (query.page + 1);
          fetch(url)
            .then(response => response.json())
            .then(result => {
              resolve({
                data: result.data,
                page: result.page - 1,
                totalCount: result.total
              });
            });
        })
      }
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              {
                const data = this.state.data;
                data.push(newData);
                this.setState({ data }, () => resolve());
              }
              resolve();
            }, 1000);
          })
      }}
      title="Remote Data Example"
    />
  )
    }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Есть решение, вызывающее функцию, которая управляет всем событием запроса таблицы материалов

Вы можете сделать это, создав ссылку React на таблицу. И в этот момент вы можете получить доступ к функции. Вы можете использовать это для передачи значений непосредственно в функции, если хотите.

Это шаг: 1- Создайте значение и присвойте React.createRef(), пусть tableRef = React.createRef()

2- Присвойте это свойству Material Table, которое называется tableRef.

tableRef = {tableRef}

3- Затем вы можете вызвать функцию onQueryChange() без каких-либо параметров, когда вам нужно обновить таблицу.

tableRef.current.onQueryChange()

Например:

`async apiDelete(IDs) {
try {
  await Service.delete(IDs);
  this.state.tableRef.current.onQueryChange();
} catch (e) {
  console.log("Error Deleting" + e);
}

} `

Вы можете делать другие вещи, такие как: this.state.tableRef.current.onQueryChange({filters: "value"});

Пожалуйста, создайте файл console.log(tableRef), чтобы увидеть все, что вы можете сделать.

Дайте мне знать, если это поможет вам С уважением