Question

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

您不从功能性Component Plus forEach中返回任何内容，也不返回任何内容，而是将其更改为map。

还需要在循环中为Thumbnail组件设置唯一键

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

我建议阅读这篇map vs. forEach

ReactJS-渲染未返回任何内容

1 个答案: