Reactjs 创建动态表

我正在尝试创建一个包含动态数据的表，以便可以重用该表。标题按预期显示，但行根本不显示

数据：

标题：

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>
)

const行=（）=>{
如果（数据）{
data.map（（行）=>
{row}
)
}
};
返回(
{headers.map（（headCell）=>(
{headCell.id}
))}
{rows}
)

---

这样，将显示标题，但不显示行。有人知道为什么吗？

我想你是在试图渲染对象。
试试这个：

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行=（）=>{
如果（数据）{
data.map（（行）=>
{row.name}
{row.phone}
{row.meducal}
)
}
};

或者，如果您不想硬编码：

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>)
    }
};

const行=（）=>{
如果（数据）{
data.map（（行）=>
{Object.keys（row.map）（（项，索引）=>{
返回{行[项]}
})
)
}
};

我认为您正在尝试渲染对象。
试试这个：

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行=（）=>{
如果（数据）{
data.map（（行）=>
{row.name}
{row.phone}
{row.meducal}
)
}
};

或者，如果您不想硬编码：

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>)
    }
};

const行=（）=>{
如果（数据）{
data.map（（行）=>
{Object.keys（row.map）（（项，索引）=>{
返回{行[项]}
})
)
}
};

您现在正在使用表数据调用

行（数据）

。此外，您也没有使用数据创建单元格

这是你可以做到的

const headCells=[
{dataIndex:'id'，name:'id'}，
{dataIndex:'name'，name:'name'}，
{dataIndex:'phone'，name:'phone'}，
{dataIndex:'medical'，name:'medical'}
];
常量头=（{cols}）=>{
返回列映射（（列）=>(
{col.name}
));
}
常量行=（{data，cols}）=>{
如果（数据）{
返回数据.map（（行）=>
{cols.map（col=>{row[col.dataIndex]}）}
);
}
否则返回[]；
};
返回(
)

您现在正在使用表数据调用

行（数据）

。此外，您也没有使用数据创建单元格

这是你可以做到的

const headCells=[
{dataIndex:'id'，name:'id'}，
{dataIndex:'name'，name:'name'}，
{dataIndex:'phone'，name:'phone'}，
{dataIndex:'medical'，name:'medical'}
];
常量头=（{cols}）=>{
返回列映射（（列）=>(
{col.name}
));
}
常量行=（{data，cols}）=>{
如果（数据）{
返回数据.map（（行）=>
{cols.map（col=>{row[col.dataIndex]}）}
);
}
否则返回[]；
};
返回(
)

这就是重点。我想重用组件，所以我不想说

行。name

，我想让组件显示

数据中的任何字段，这就是重点。我想重用组件，所以我不想说
行。name
，我想让组件显示
数据中的任何字段您没有实际调用该方法..因此
null
返回值。编辑：或者说根本没有值-等于没有渲染^^您没有实际调用该方法..因此
null
返回值。编辑：或者说根本没有值-等于没有渲染^^