我正在尝试使用 MUI 制作列表，我在 console.log 中获取列表，但没有显示任何错误，没有数据，只有 console.log。
这是我收到的数据样本：
[
{
"id": 0,
"navn": "Til rådighed",
"beloeb": 20000,
"tilhors_id": null,
"title": 0,
"subtotal": 0
},
{
"id": 1,
"navn": "før bryllup",
"beloeb": 0,
"tilhors_id": null,
"title": 1,
"subtotal": 0
},
{
"id": 2,
"navn": "Invitationer",
"beloeb": 0,
"tilhors_id": 1,
"title": 0,
"subtotal": 0
},
{
"id": 3,
"navn": "Subtotal før bryllup",
"beloeb": 0,
"tilhors_id": 1,
"title": 0,
"subtotal": 1
},
{
"id": 4,
"navn": "til bryllup",
"beloeb": 0,
"tilhors_id": null,
"title": 1,
"subtotal": 0
}
]
这是我的map功能：
const listItems = (id) => {
console.log(liste)
if (liste === []) {
getList()
} else {
liste.map((l) => {
if (id === l.tilhors_id) {
console.log(l)
return (
<List
sx={{ width: '100%', maxWidth: 500, bgcolor: 'white' }}
component="nav"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
{l.navn}
</ListSubheader>
}
key={l.id}
>
<ListItemButton onClick={handleClick}>
<ListItemText primary={l.navn} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
{!l.subtotal ? (
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 4 }} onClick={handleClick}>
<div>{l.navn} {l.beloeb}</div>
<ListItemText primary="Starred" />
<Button>X</Button>
</ListItemButton>
</List>
</Collapse>) :
(<ListItemButton>
<ListItemText primary={l.navn} />
</ListItemButton>)}
</List>
)
}
})
}
}
我尝试在没有地图的情况下将其放入 Codesandbox 并按原样显示，我在这里迷路了，因为我没有收到任何错误，只是一个空白页...
map在大多数情况下，条件并不理想。如果我们不使用所有正确的返回来处理它，列表将返回一些undefined值。您可以检查以下实现
const data = [
{
"id": 0,
"navn": "Til rådighed",
"beloeb": 20000,
"tilhors_id": null,
"title": 0,
"subtotal": 0
},
{
"id": 1,
"navn": "før bryllup",
"beloeb": 0,
"tilhors_id": null,
"title": 1,
"subtotal": 0
},
{
"id": 2,
"navn": "Invitationer",
"beloeb": 0,
"tilhors_id": 1,
"title": 0,
"subtotal": 0
},
{
"id": 3,
"navn": "Subtotal før bryllup",
"beloeb": 0,
"tilhors_id": 1,
"title": 0,
"subtotal": 1
},
{
"id": 4,
"navn": "til bryllup",
"beloeb": 0,
"tilhors_id": null,
"title": 1,
"subtotal": 0
}
]
const result = data.map(item => {
if(item.id === 2) {
return item
}
})
console.log(result)如果您只想渲染符合您的条件的数据，您可以filter在调用map渲染之前使用。毕竟，您需要像下面这样重新分配值
liste = liste.filter((l) => l.tilhors_id === id).map((l) => <List key={l.id}>
...
</List>)
完全可能的实施
const listItems = (id) => {
console.log(liste)
if (liste === []) {
getList()
} else {
liste = liste.filter((l) => l.tilhors_id === id).map((l) => <List
sx={{ width: '100%', maxWidth: 500, bgcolor: 'white' }}
component="nav"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
{l.navn}
</ListSubheader>
}
key={l.id}
>
<ListItemButton onClick={handleClick}>
<ListItemText primary={l.navn} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
{!l.subtotal ? (
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 4 }} onClick={handleClick}>
<div>{l.navn} {l.beloeb}</div>
<ListItemText primary="Starred" />
<Button>X</Button>
</ListItemButton>
</List>
</Collapse>) :
(<ListItemButton>
<ListItemText primary={l.navn} />
</ListItemButton>)}
</List>)
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句