时间戳

首页 > 解决方案 > 如何从我的 REST API 中获取数据以填充材料表？

node.js - 如何从我的 REST API 中获取数据以填充材料表？

问题描述

我正在构建一个应用程序，它将从 API 请求数据并将其显示在可编辑的表格中，用户可以在其中编辑和更新数据库。我将 React 与material-table一起使用。

我遵循了这个codeSandbox Example 并且所有的硬编码数据都可以正常工作。但是，我想从我的 API 端获取真实数据以显示在表格中。我检查了材料表文档，但它没有解决我的问题。

我在父组件的状态下初始化数据，并将其作为道具传递给渲染表格的子组件。

如何实时获取数据？注意我正在使用功能组件。

提前致谢。

标签： node.jsreactjsmaterial-uifetch-apimaterial-table

解决方案

这是我使用假 API 填充表格的工作代码Codesandbok 。

问题是当组件安装你的 props.data 是 [] 并且在 Table 组件中你将它设置为

const [gridData, setGridData] = useState({
    data: props.data,
    columns: props.col,
    resolve: () => {},
    updatedAt: new Date()
  });

这里数据将被分配为 [] & 现在当 api 请求发生时 props.data 已填充，但您的 useState 已经初始化，因此数据仍将是 []。

要解决此问题，您可以使用 props.data 作为

<MaterialTable
    title="Your Title"
    columns={gridData.columns}
    data={props.data} // use props.data to populate the table
    editable={{
      isEditable: rowData => true,
      isDeletable: rowData => true,
      onRowAdd: onRowAdd,
      onRowUpdate: onRowUpdate,
      onRowDelete: onRowDelete
    }}
/>

或者您可以为数据创建一个单独的状态并检查其是否已更新或未使用 useEffect。

推荐阅读