Вызов дочернего компонента внутри функции карты в ReactJs - PullRequest
1 голос
/ 05 марта 2020

У меня есть состояние времени массива и в нем есть данные. Что я хочу сделать, так это отобразить это состояние и вызвать дочерние компоненты с реквизитом

Мое состояние

 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

      })

    }
     }

Это журнал, который вызывается на 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", … }

Есть идеи? Заранее спасибо

Ответы [ 2 ]

5 голосов
/ 05 марта 2020

вы можете передать 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;
}
 }

Надеюсь, это должно работать

1 голос
/ 05 марта 2020
this.state.feedArray.map((feed,id)=>{
        console.log(feed.body); 
        return (<FeedElement id={id} body={feed.body}/> );  Works
      })

feed.id эквивалентно feed[id], и если id отсутствует в массиве объектов, то при обращении к нему выдается undefined , однако из console.log, который вы указали для feed, есть feed.feedid, вы можете передать id={feed.feedid} или id={id}

...