将一个道具的值从一个函数传递给React.JS中的render()
问题描述:
我正在从我的React App向我的后端发出get请求。该调用是成功的,我能够从后端接收值。但是,我无法将该值设置为前端DOM。 这里是我目前类的样子:将一个道具的值从一个函数传递给React.JS中的render()
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
。
我在做什么错?
答
你应该从renderProds
方法中返回一些东西。试试这个:
renderProds(){
const data = this.props.products;
if(data){
return data.map((e)=>{ // return computed value
return (
<Product
name={e.name}
desc={e.desc}
/>
);
});
}
}
这与我的退货声明有什么不同? – Aditya
'data.map'方法创建一个新的数组,并在调用数组中的每个元素上调用提供的函数的结果。因此'data.map'中的返回状态返回新数组的元素,而不是'renderProds'函数的返回值。 – huachengzan