Я новичок в 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>
Простой