Я пытаюсь составить список с помощью MUI, я получаю список в console.info, но ничего не отображается, никаких ошибок, никаких данных, только console.info.
Это образец данных, которые я получаю:
[
{
"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.info(liste)
if (liste === []) {
getList()
} else {
liste.map((l) => {
if (id === l.tilhors_id) {
console.info(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 без карты, и он показал это, как и предполагалось, я потерялся здесь, потому что я не получаю никакой ошибки, просто пустая страница ...
Я думаю, вы забыли вернуть сопоставленный jsx из функции listItems.
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.info(result)
Если вы хотите отображать только данные, соответствующие вашему условию, вы можете использовать filter
перед вызовом map
для рендеринга. И в конце концов, вам нужно присвоить значения обратно, как показано ниже
liste = liste.filter((l) => l.tilhors_id === id).map((l) => <List key = {l.id}>
...
</List>)
Полная возможная реализация
const listItems = (id) => {
console.info(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>)
}
}
Спасибо, это сработало, я не знаю, почему я раньше не подумал о фильтре.
это не работает, потому что thilhors_id не соответствует вашему аргументу id, который вы передаете в свой список, "tilhors_id=null