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 return 是一个列表，而 forEach return 是未定义的。

您没有return您的功能组件中的任何东西 Plus forEach没有return任何东西，而是将其更改为映射。

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

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

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

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

ReactJS - Nothing was returned from render

render