如何从对象数据中获取 React '@material-ui/data-grid'的列和行

Question

我正试图从mockapi中获取数据，并将其放在我的数据网格中。

数据网格需要定义行和列。

我为练习手动定义了这些，但我想从axios获得对象数据，并将其映射到的行和列中

async function getBoards() {
const response = await axios.get(
'https://60aba7e...
);
return response.data;
...
const {loading, data, error } = state;
<DataGrid rows={props.rows} columns={props.columns} pageSize={10} onRowSelected={(e) => {showPopUp(e.data);}}/>
}

Answer 1

尝试这样的方法将数据映射出

const detailsRows = rows.map((row) => {
return {
id: row.item_id,
model: row.model_no,
title: row.title,
};

然后像一样将其传递到DataGrid

<DataGrid rows={detailsRows} columns={props.columns} pageSize={10} onRowSelected={(e) => {showPopUp(e.data);}}/>