在ReactJs中调用映射函数内部的子组件

Question

我有一个数组时间的状态，其中有数据。我想做的是映射到这个状态，并调用具有道具的子组件

我的州

this.state = { 
user:'',
feedArray:[],
}

设置数据的功能

//I CALLED THIS IN COMPONENTDIDMOUNT
renderFeed(){
rdb.ref("feeds").once('value',(snapshot)=>{
snapshot.forEach((childSnapshot)=>{
this.setState({feedArray:Object.values(childSnapshot.val())})
})
}).then(()=>{
console.log(this.state.feedArray);
})

}

返回部分

render() { 
if (this.state.feedArray) {
this.state.feedArray.map((feed,id)=>{
console.log(feed.body);   //this works fine
return (<FeedElement id={feed.id} body={feed.body}/> );  //This Not Works
})
}
}

This Is The log Cosoled on console.log(This.state.feedArray(

(4) […]
​
0: Object { author: "AashiqOtp", body: "kkk", feedid: "-M1_6POMRyqRv2tIKrF9", … }
​
1: Object { author: "AashiqOtp", body: "kkk", feedid: "-M1_6XYaUAlsXlwnAbcp", … }
​
2: Object { author: "AashiqOtp", body: "f", feedid: "-M1_HB07eh_08OFFRBbO", … }
​
3: Object { author: "AashiqOtp", body: "we have a new rm", feedid: "-M1d4xwLmSUKA0RZlH-Q", … }

有什么想法吗？提前感谢

Answer 1

您可以传递feed.feedid而不是feed.id并在map函数之前返回吗。

render() { 
if (this.state.feedArray) {
return this.state.feedArray.map((feed,id)=>
(<FeedElement id={feed.id} body={feed.body}/> );  //This Not Works
)
}else {
return null;
}
}

希望它能在上工作

Answer 2

this.state.feedArray.map((feed,id)=>{
console.log(feed.body); 
return (<FeedElement id={id} body={feed.body}/> );  Works
})

feed.id等同于feed[id]，如果id定义，但是从您提供的feed具有feed.feedid的控制台日志中，您可以传递id={feed.feedid}或id={id}