平面列表渲染来自firestore的重复数组

Question

我正在将数据从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)}/> 

Answer 1

我想通了。我需要创建一个用于评论的变量，并首先将其链接到this.state。当我创建一个空的变量时，它被复制了。简单地说

var reviews = this.state.reviews 

解决了这个问题