Question

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

我遵循了这个codeSandbox示例，并且对于硬编码数据一切都可以正常工作。但是，我想从API端获取真实数据以显示在表中。我签出了材料表文档，但不能解决我的问题。

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

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

谢谢。

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为数据创建一个单独的状态并检查其状态是否已更新。

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

1 个答案: