將一個道具的值從一個函數傳遞給React.JS中的render（）

Question

我正在從我的React App向我的後端發出get請求。該調用是成功的，我能夠從後端接收值。但是，我無法將該值設置爲前端DOM。 這裏是我目前類的樣子：

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> 
     ) 
    } 
} 

我確信，我的產品成分導入正確，它是接受道具name和desc。

我在做什麼錯？

Answer 1

你應該從renderProds方法中返回一些東西。試試這個：

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