Transmettez la valeur d'un accessoire d'une fonction à render() dans React.JS

Question

Je fais une requête get de mon application React à mon backend. L'appel est réussi et je suis en mesure de recevoir les valeurs de backend. Cependant, je ne suis pas en mesure de définir la valeur à l'extrémité frontale DOM. Voici comment ma classe ressemble actuellement:

class App extends React.Component{ 
    componentDidMount(){ 
     this.props.getData(); 
    } 
    renderProds(){ 
     const data = this.props.products; 
     if(data){ 
      data.map((e)=>{ 
       return (
        <Product 
         name={e.name} 
         desc={e.desc} 
        /> 
       ); 
      }); 
     } 
    } 
    render(){ 
     return(
      <div>{this.renderProds()}</div> 
     ) 
    } 
} 

Je me suis assuré que mon Constituant du produit est importé correctement et il accepte les accessoires name et desc.

Qu'est-ce que je fais mal?

Answer 1

Vous devriez retourner quelque chose de vos méthodes renderProds. Essayez ceci:

renderProds(){ 
     const data = this.props.products; 
     if(data){ 
      return data.map((e)=>{ // return computed value 
       return (
        <Product 
         name={e.name} 
         desc={e.desc} 
        /> 
       ); 
      }); 
     } 
    }