Я пытаюсь создать таблицу с динамическими данными, чтобы я мог повторно использовать таблицу. Заголовки отображаются так, как задумано, но строки не отображаются вообще.

Данных:

[
    {
        "id": "1231",
        "name": "Michael",
        "phone": "11223311",
        "medical": "YES"
    },
    {
        "id": "32123",
        "name": "Johnson",
        "phone": "3311323",
        "medical": "NO"
    }
]

Заголовки:

const headCells = [
        {id: 'id'},
        {id: 'name'},
        {id: 'phone'},
        {id: 'medical'}

Что я сделал:

const rows = () => {
    if (data) {
        data.map((row) =>
            <TableRow key={row.uuid}>
                <TableCell>{row}</TableCell>
            </TableRow>)
    }
};

return(
<TableContainer component={Paper}>
    <Table stickyHeader aria-label="sticky table">
        <TableHead>
            <TableRow>
                {headers.map((headCell) => (
                    <TableCell>{headCell.id}</TableCell>
                ))}
            </TableRow>
        </TableHead>
        <TableBody>
            {rows}
        </TableBody>
    </Table>
</TableContainer>
)

При этом отображаются заголовки, а строки нет. Кто-нибудь может понять почему?

1
John 15 Апр 2020 в 16:54

2 ответа

Я думаю, что вы пытаетесь визуализировать объекты.
попробуй это:

const rows = () => {
    if (data) {
        data.map((row) =>
            <TableRow key={row.uuid}>
                <TableCell>{row.name}</TableCell>
                <TableCell>{row.phone}</TableCell>
                <TableCell>{row.meducal}</TableCell>
            </TableRow>)
    }
};

Или это, если вы не хотите жестко кодировать это:

const rows = () => {
    if (data) {
        data.map((row) =>
            <TableRow key={row.uuid}>
                {Object.keys(row).map((item, index)=>{
                    return <TableCell key={index}>{row[item]}</TableCell>
                })
            </TableRow>)
    }
};
2
saeed ghotb 15 Апр 2020 в 13:59

Теперь вы звоните rows(data) с данными таблицы. Также вы не создаете ячейки с данными

Вот как вы можете это сделать

const headCells = [
    {dataIndex: 'id', name: 'ID' },
    {dataIndex: 'name', name: 'Name' },
    {dataIndex: 'phone', name: 'Phone' },
    {dataIndex: 'medical', name: 'Medical' }
];

const Header = ({ cols }) => {
  return cols.map((col) => (
     <TableCell>{col.name}</TableCell>
   ));
}

const Rows = ({ data, cols }) => {
    if (data) {
        return data.map((row) =>
            <TableRow key={row.uuid}>
                {cols.map(col => <TableCell>{row[col.dataIndex]}</TableCell>)}
            </TableRow>
       );
    }
    else return [];
};

return(
<TableContainer component={Paper}>
    <Table stickyHeader aria-label="sticky table">
        <TableHead>
           <TableRow>
             <Header cols={headCells} />
           </TableRow>
        </TableHead>
        <TableBody>
            <Rows data={data} cols={headCells} />
        </TableBody>
    </Table>
</TableContainer>
)
0
Zohaib Ijaz 15 Апр 2020 в 14:03