Refre sh таблица не работает с функциональным компонентом - с использованием MaterialTable от https://material-table.com

Question

Я использую MaterialTable из https://material-table.com/# / docs / features / editable , чтобы отобразить данные и грубые операции в моем приложении. Я хотел бы refre sh данных из таблицы после операции CRUD (добавить, обновить, удалить).

function fetchData(query: Query<Row>, fetchUrl: String): Promise<QueryResult<never>> {
  return (new Promise((resolve, reject) => {
    let url = `${fetchUrl}?page=${query.page}&size=${query.pageSize}`
    fetch(url, {
      headers: {
        'Content-Type': 'application/json',
        'accept': 'application/json',
        'Authorization': `Bearer ${getSessionStorageItem('token')}`
      }
    })
      .then(response => response.json())
      .then(result => {
        resolve({
          data: result.content,
          page: result.pageable.pageNumber,
          totalCount: result.totalElements,
        })
      })
  })
  )
}

export function MaterialTableDemo() {

  return (
    <MaterialTable
      title="Produkty"
      localization={{
        header: {
          actions: "Akcje"
        }
      }}
      columns={[
        { title: 'Id', field: 'id', editable: 'never' },
        { title: 'Nazwa', field: 'name' },
        { title: 'Cena', field: 'price' },
      ]}
      data={query =>
        fetchData(query, 'http://localhost:8080/products')
      }
      icons={tableIcons}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              addProducts(newData);
              resolve()
            }, 3000)
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              updateProducts(newData);
              resolve()
            }, 600)
          }),
        onRowDelete: oldData =>
          new Promise(resolve => {
            setTimeout(() => {
              deleteProduct(oldData.id);
              resolve();
            }, 6000);
          }),
      }}
    />
  );
}

Я пытался использовать createRef () из React, но он не работает. Как мне этого добиться?

Answer 1

Вы пытались сохранить загруженные данные в состоянии?

const [tableData, setTableData] = useState([])

затем

useEffect(() => {
  // Your download function
  setTableData(response.data)
}, [])

Это должно заставить React отслеживать эти данные и повторно отображать компонент, если что-то меняется.