flatlist 从 firestore 渲染重复数组答案

【问题标题】：flatlist rendering duplicate array from firestoreflatlist 从 firestore 渲染重复数组
【发布时间】：2018-09-03 22:40:19
【问题描述】：

我正在将数据从 firestore 提取到一个平面列表中。出于某种原因，我来自 firestore 的数组渲染了两次。有没有人遇到过这个问题？

onCollectionUpdate = (querySnapshot) => {
var reviews = [];
let that = this;
querySnapshot.forEach((doc) => {
const { user, review, image} = doc.data();
reviews.push({
  key: doc.id,
  user: doc.data().user,
  review: doc.data().review, 
  image: doc.data().image, 
    });
  });
  that.setState({ 
  reviews,
  loading: false,
  });
}

我的渲染函数如下。

_renderItem(reviews){
console.log(reviews);
<View style={{height: 60, marginRight: 0, marginLeft: 0, backgroundColor: '#D3D3D3', flexDirection: 'row'}}>
          <View style={{marginLeft: 10, justifyContent: 'center'}}>
              <Avatar
                small
                rounded
                source={{uri: reviews.item.image}}
                activeOpacity={0.7}
              />
          </View>
          <View style={{marginLeft: 5, justifyContent: 'center'}}>
              <Text>
              {reviews.item.user}
              </Text>
              <ReadMore
                  numberOfLines={1}
                  renderRevealedFooter={this._renderRevealedFooter}>
                  <Text>                       
                  {reviews.item.review}
                  </Text>
              </ReadMore>
          </View>
 </View>

  }

我的平面列表是

<FlatList 
  data={this.state.reviews}     
  keyExtractor={(item, index) => index}
  renderItem={this._renderItem.bind(this)}/>

【问题讨论】：

标签： arrays react-native google-cloud-firestore react-native-flatlist

【解决方案1】：

想通了。我需要先为评论创建一个变量并将其链接到 this.state。当我创建一个空变量时，我被复制了。简单地放下

var reviews = this.state.reviews

解决问题

【讨论】：