रेंडर से कुछ भी वापस नहीं किया गया था। इसका आमतौर पर मतलब है कि रिटर्न स्टेटमेंट गायब है। या, कुछ भी नहीं प्रस्तुत करने के लिए, अशक्त लौटें।

मुझे इस संदेश से संबंधित एक समस्या है। यह मेरा घटक है जो त्रुटि का कारण बनता है:

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;

मैं एक या दो घंटे की तरह त्रुटि की तलाश में हूं। मुझे किसकी याद आ रही है?

3
Exitl0l 11 नवम्बर 2018, 18:31

1 उत्तर

सबसे बढ़िया उत्तर

ध्यान दें कि map एक सूची देता है जबकि forEach अपरिभाषित लौटाता है।

आप अपने कार्यात्मक घटक से कुछ भी वापस नहीं करते हैं प्लस forEach कुछ भी वापस नहीं करता है, इसके बजाय इसे मानचित्र में बदल दें।

इसके अलावा आपको लूप में थंबनेल घटक के लिए अद्वितीय कुंजी सेट करने की आवश्यकता है

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

मैं इस लेख को पढ़ने का सुझाव दूंगा map vs. forEach

2
Hemadri Dasari 11 नवम्बर 2018, 17:03