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

Question

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

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

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

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

提前致谢。

Answer 1

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

问题是当组件挂载你的 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 检查其是否已更新。