2017-10-21 39 views
0

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:Transmettez la valeur d'un accessoire d'une fonction à render() dans React.JS

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?

Répondre

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} 
        /> 
       ); 
      }); 
     } 
    } 
+0

En quoi est-ce différent de ma déclaration de retour? – Aditya

+0

La méthode 'data.map' crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant. Donc, l'état de retour dans 'data.map' renvoie l'élément du nouveau tableau, pas la valeur de retour de la fonction' renderProds'. – huachengzan