Versuchen Sie, eine Komponente in einer Komponente aufzurufen - React

Question

So begann ich mit React und ich habe diese beiden Komponenten.

In der ersten Komponente möchte ich ein Array von Objekten mit der map() - Funktion (die funktioniert) und die andere Komponente, die nur ein einfaches h1-Tag zurückgibt, aufrufen.

Nun, nichts wurde aufgerufen und es gibt keinen Fehler in der Konsole. Ich glaube, das Problem ist in dem Rück Satz im renderAvatarData() (wenn ich console.log nach der Rückkehr Satz tun scheint es dort nicht zu bekommen, aber wenn die console.log vor der Rückkehr ist es ruft)

HomePageBoxesData.js

import React, { Component } from 'react'; 

import AvatarDetails from './AvatarDetails'; 

class HomePageBoxesData extends Component{ 

    constructor(props) { 
    super(props); 
    }; 

    renderAvatarData(){ 
    this.props.data.map(data => { 
     return <AvatarDetails data={data}/>  
    }); 
    } 

    render(){ 
    return(
     <div> 
      {this.renderAvatarData()} 
     </div> 
    ); 
    } 
}; 

export default HomePageBoxesData; 

AvatarDetails.js

import React, { Component } from 'react'; 

class AvatarDetails extends Component{ 

    constructor(props) { 
     super(props); 
    }; 

    render(){ 
     return(
     <h1>Hello World</h1> 
     ); 
    } 
}; 

export default AvatarDetails; 

Answer 1

Ausgabe in renderAvatarData() Methode ist, vergessen Sie return mit 012 zu verwenden,, verwenden:

renderAvatarData(){ 
    return this.props.data.map((data)=>{ 
     return <AvatarDetails data={data}/> 

    }); 
} 

Da Sie nur die Komponente return möchten, können Sie es wie folgt direkt schreiben:

renderAvatarData(){ 
    return this.props.data.map(data => <AvatarDetails data={data} />); 
} 

Answer 2

i mit Mayank Shukla einverstanden, aber ich in der Regel diese Methode in diesem Fall benutzen :

render() { 
     return(
     <div> 
     _.map(this.props.data, function(value, key){ 
      return(
      <AvatarDetails key={key} data={value} /> 
     ) 
     }) 
     </div> 

ich bin nicht sicher, ob es eine besser als die andere