ReactJS - 渲染没有返回任何内容

Question

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;

我一直在寻找一个小时左右的错误。我错过了什么？

Answer 1

请注意 map 返回一个列表，而 forEach 返回 undefined。

你不从你的功能组件返回任何东西加上 forEach 不返回任何东西，而是将它更改为映射。

还需要在循环中为缩略图组件设置唯一键

return Object.values(albums).map((element, index) => {
 return (
  <Thumbnail key={"Key-"+index} source={element.cover} />
  )
 })

我建议阅读这篇文章 map vs. forEach