ReactJS - ничего не было возвращено от рендера
Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
У меня проблема, связанная с этим сообщением. Это мой компонент, который вызывает ошибку:
import React from 'react';
import Thumbnail from './Thumbnail';
const AlbumList = ({ results }) => {
let collections = [];
let albums = { };
Object.values(results).map((item, i) => {
if (!collections.includes(item.collectionId)) {
collections.push(item.collectionId);
albums[i] = {id: item.collectionId, cover: item.artworkUrl100}
}
return albums;
});
Object.values(albums).forEach(element => {
return (
<Thumbnail source = {element.cover} />
)
})
}
export default AlbumList;
Миниатюра - это просто базовый компонент, например:
import React from 'react';
const Thumbnail = ({source}) => {
return(
<div>
<img src = {source} alt = "album cover"/>
</div>
)
}
export default Thumbnail;
Я искал ошибку около часа. Что мне не хватает?
Как вы думаете, какое значение возвращает функция AlbumList? В области действия функции AlbumList нет оператора возврата. Функции обратного вызова forEach не должны ничего возвращать.
Ответы 1
Обратите внимание, что map возвращает список, а forEach возвращает undefined.
Вы ничего не возвращаете из своего функционального компонента. Плюс forEach ничего не возвращает, вместо этого меняет его на карту.
Также вам нужно установить уникальный ключ для компонента Thumbnail в цикле
return Object.values(albums).map((element, index) => {
return (
<Thumbnail key = {"Key-"+index} source = {element.cover} />
)
})
Предлагаю прочитать эту статью карта против forEach
Я обновил ваш ответ, добавив ключ к компоненту Thumbanail, иначе будет отображаться только один
Вы неправильно используете
.map()и.forEach. С.map()вы ожидаете получить от него что-то взамен, в то время как с.forEach()вы ожидаете что-то в нем сделать.