data.map 在 React 中不显示内容

Question

我正在尝试使用 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 中，它按原样显示，我迷路了，因为我没有得到任何错误，只是一个空白页面...

Answer 1

map带条件在大多数情况下并不理想。如果我们不使用所有正确的 return 来处理它，列表将 return 带有一些 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)

如果您只想呈现符合条件的数据，则可以在调用 map 进行呈现之前设置 filter。毕竟，您需要像下面这样重新分配值

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

data.map 在 React 中不显示内容

data.map not displaying content in React

javascript

arrays

reactjs

material-ui