当动态表行没有值时如何保留它？

Question

我有这段代码：

const HistoricalGrid = ((props) => {
return (
    <div className="main-table">
        <DataTable rows={props.selectedFile} headers={headers}>
            {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
                <Table {...getTableProps()}>
                    <TableHead>
                        <TableRow>
                            {headers.map((header) => (
                                <TableHeader {...getHeaderProps({ header })}>
                                    {header.header}
                                </TableHeader>
                            ))}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {props.selectedFile.map((row) => (
                            <TableRow rows="4"  {...getRowProps({ row })}>
                                <TableCell key={row.id} >{row.name}</TableCell>
                                <TableCell key={row.id}>{row.type}</TableCell>
                                <TableCell key={row.id}>{new Date().toString()}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            )}
        </DataTable>

但是，我只在单击按钮时获取行数据，即使没有值，如何保留行？

Answer 1

您可以检查数组长度并使用三元：

                        {props.selectedFile.length                                                                       
                            ? props.selectedFile.map((row) => (
                               ...
                            ))
                            : <TableRow>No result</TableRow>
                        }

Answer 2

const generateNRows = nb => {
     const rows = [];
     for($i = 0; $i < $nb; $i++){
         rows.push(<tr/>);
     }
     return rows;
}

const nowDate = new Date();

return (...

                        {props.selectedFile.map((row) => (
                            <TableRow  {...row} key={row.id} >
                                <TableCell>{row.name}</TableCell>
                                <TableCell>{row.type}</TableCell>
                                <TableCell>{nowDate.toString()}</TableCell>
                            </TableRow>
                        ))}
                        {props.selectedFile.length < 4 && (
                            <>
                                {generateNRows(4 - props.selectedFile.length)}
                            </>
                         )}