Data.map не отображает контент в React

Я пытаюсь составить список с помощью 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 без карты, и он показал это, как и предполагалось, я потерялся здесь, потому что я не получаю никакой ошибки, просто пустая страница ...

это не работает, потому что thilhors_id не соответствует вашему аргументу id, который вы передаете в свой список, "tilhors_id=null

Eugen Sunic 10.04.2022 13:20

Я думаю, вы забыли вернуть сопоставленный jsx из функции listItems.

Saif Ali Khan 10.04.2022 13:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
35
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Спасибо, это сработало, я не знаю, почему я раньше не подумал о фильтре.

TWOcvfan 10.04.2022 20:49

Другие вопросы по теме