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

【问题标题】：how to get columns and rows for React '@material-ui/data-grid' from object data如何从对象数据中获取 React '@material-ui/data-grid' 的列和行
【发布时间】：2021-05-25 11:59:50
【问题描述】：

我正在尝试从 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);}}/>

}

【问题讨论】：

标签： reactjs axios material-ui

【解决方案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);}}/>

【讨论】：