Я довольно новый, чтобы реагировать. Я получаю ответ от API, с помощью которого я хочу создать таблицу. Я надеюсь, что метки времени в качестве имен столбцов и имен строк будут представлены в качестве службы (service1, service2, service3), а данные - в качестве статуса службы для каждой даты и времени.
[
{
"datetime": "2020-02-13T23:05:35.727Z",
"data": [
{
"error": "",
"status": "up",
"service": "service1"
},
{
"error": "",
"status": "up",
"service": "service2"
},
{
"error": "",
"status": "up",
"service": "service3"
}
]
}
]
Ниже приведен мой код, но он печатается в виде строк:
У меня есть два разных метода: один для извлечения имен столбцов таблицы, а другой для предоставления данных для таблицы.
renderTableCells() {
let rowcells = []
rowcells.push(<TableCell>Service</TableCell>)
this.state.items.map((result, index) => {
rowcells.push(<TableCell align="right">{result.datetime}</TableCell>)
})
return rowcells;
}
renderTableData() {
let rowcells = []
this.state.items.map((result, index) => {
result.data.map((serviceStatus, index) =>{
const { service, status} = serviceStatus
rowcells.push(<TableCell align="right">{service}</TableCell>)
rowcells.push(<TableCell align="right">{status}</TableCell>)
})
})
return rowcells;
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <Loader />
} else {
return (
<div>
<h1 id='title'>React Dynamic Table</h1>
<TableContainer component={Paper}>
<Table size="small" aria-label="a dense table">
<TableHead>
<TableRow>
{this.renderTableCells()}
</TableRow>
</TableHead>
<TableBody>
{this.renderTableData()}
</TableBody>
</Table>
</TableContainer>
</div>
)
}
}