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

【问题标题】：ReactJS - Nothing was returned from renderReactJS - 渲染没有返回任何内容
【发布时间】：2019-04-14 11:18:18
【问题描述】：

渲染没有返回任何内容。这通常意味着缺少 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;

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

【问题讨论】：

您错误地使用了.map() 和.forEach。使用.map()，您希望从中获得一些回报，而使用.forEach()，您希望从中有所作为。
你觉得 AlbumList 函数的返回值是多少？ AlbumList 函数的范围内没有 return 语句。 forEach 回调函数不需要返回任何东西。

标签： reactjs render

【解决方案1】：

注意map 返回一个列表，而forEach 返回未定义。

你不会从你的函数式组件中返回任何东西 Plus forEach 不会返回任何东西，而是将其更改为 map。

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

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

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

【讨论】：

我更新了您的答案，将密钥添加到 Thumbanail 组件，否则只会呈现一个