@moody_good

JSX: Как отобразить массив с объектами внутри массива с объектами?

Я новичок в React и JS. Делаю приложение с использованием Redux. И бэкенда возвращается список sections. и через map к каждой секции добавляется chapters. Получается массив с объектами внутри массива с объектами.
export function getSections(id) {
    return function(dispatch, getState) {
        return fetch(`${API_URL}/courses/${id}/sections`)
            .then(res => res.json())
            .then(sections => {
                sections.map(section => {
                    let allChapters = [];
                    fetch(`${API_URL}/sections/${section.id}/chapters`)
                        .then(res => res.json())
                        .then(data => {
                            if(data) {
                                data.map(chapter => {
                                    allChapters.push({id: chapter.id, name: chapter.name});
                                })
                            }
                            // allChapters = data так тоже не работает
                        });
                    section.chapters = allChapters;
                    // section.chapters = [{id:1,name:'sdsd'},{id:3,name:'sdw'}]; а вот так работает
                    return section;
                });
                dispatch(setCourseSections(sections));
            });
    }
}

Через console.log все выводится правильно, как задумано. А вот через map-ы в JSX нет. Вместо списка с chapters пустота (даже empty не выводится), только иногда список chapterID-шек появляется и исчезает. Какой-то blink-effect как будто.
А если вместо второго fetch просто присваивать к каждой section статичный chapters (закомментировано в коде сверху) все выводится без ошибок.
<Collapse accordion>
    {sections ? sections.map((section, i) => 
        <Panel header={section.name} key={i}>
            {section.chapters ? 
                section.chapters.map((ch) => ch.id)
            : 'empty'}
        </Panel>
    ) : ''}
</Collapse>
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Dasslier
FrontEnd Developer
Посмотри внимательно, что ты делаешь в JSX. Ты должен в мапе создать новые JSX элементы, а ты тупо ID список делаешь
И в тернарнике делай null, а не пустую строку
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы