1

我在 Firestore 中遇到数据重复问题。我正在使用 react-infinite-scroll-component webpack 创建一个无限滚动。我在使用来自 firestore 的调用时遇到问题，我可以按照文档返回所有带有分页的项目，但是只要我点击我的喜欢功能发布一个新帖子就会添加到我的帖子提要中，这可以在我的提要中的任何位置. 我怎么解决这个问题？

我的滚动正在工作，只要我向下滚动以将其他帖子调用到我的提要中，它们就会按原样返回，但是一旦我单击喜欢或不喜欢帖子，就会将新帖子添加到我的提要中。欢迎大家帮忙，谢谢大家。

我在社区中查看了here，但没有找到任何可以澄清我的问题的东西

this.state = {
      PostsAtt: [],
      last: Object,
    }

无限滚动功能（获取更多帖子）。

InfScroll() {
    let set = this
    let db = firebase.firestore()
    let last = this.state.last

    var next = db.collection("newPost").orderBy('createdAt', 'desc').startAfter(last).limit(3);
    next.onSnapshot(querySnapshot => {
    var lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1];
    
    querySnapshot.forEach(doc => {
      this.state.PostsAtt.push( { data: doc.data(), id: doc.id } )         
    });
    set.setState( { last: lastVisible } );     
    });
  };

来自firestore的getDocs func分页

getDocs() {   
  let set = this
    let db = firebase.firestore()
    //initiate first set
    var first = db.collection("newPost").orderBy('createdAt', 'desc').limit(3);
    first.onSnapshot(function (documentSnapshots) {
      // Get the last visible document
      var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
      //initiate local list 
      let PostsAtt = [];
      documentSnapshots.forEach(doc =>  {
        PostsAtt.push({ data: doc.data(), id: doc.id})
      });
        set.setState({ PostsAtt, last: lastVisible });
      }); 
}

组件DidMount

 componentDidMount() {
    // get firestore docs;
    this.getDocs();
  }

类组件中的 JSX 映射

 <InfiniteScroll
          dataLength={this.state.PostsAtt.length}
          next={ this.InfScroll }
          hasMore={true}
          loader={<h4 style={{textAlign: 'center'}}>Loading...</h4>}
          height={780}
          endMessage={
            <p style={{ textAlign: "center" }}>
              <b>Não há mais posts.</b>
            </p>
          } >
            
          <div>
              { this.state.PostsAtt.map( (data,index) => {   
                  return (               
                  <div className="viewPost-content" key={index}>
                    {index}
                    <div className="viewPost-box" 
                    width={{width: '600px'}} height={{height: '505px'}}
                    style={{
                      backgroundColor: data?.data.colorBg,
                      backgroundImage: `url(${data?.data.url_img})`,
                      color: 'White'               
                    }}
                    >            
                    <p> <Moment to={data?.data.createdAt.toDate().toString()} /> </p>            
                        <h2 className="text-post"> {data?.data.texto} </h2>                                   
                        <div class="viewPost-icons">
                          <div style={{marginRight: '-5px', marginTop: '180px', backgroundColor:'transparent'}}>             
                            <Link to={`/Posts/${data?.id}`}>
                              <i class="fas fa-comment" 
                                style={{textShadow : ' 2px 1px 1px #000000',color: 'White'}}>                          
                              </i>
                            </Link>
                          </div>
                          <div style={{marginLeft: '-15px', marginTop: '180px',
                            textShadow : '2px 1px 1px #000000'}}> { data?.data.comentarios.length}
                          </div>
                          <div style={{marginRight: '-5px', marginTop: '176px'}}>
                            <button id="bt-Posts" onClick={() => this.UplikeFunc(data?.id,data?.data.likes)}  
                              value={this.state.corDoLike} 
                              style={{color: data?.data.LikeColor}}>
                              
                              <i class="fas fa-thumbs-up" style={{textShadow : ' 2px 1px 1px #000000'}}></i>
                            </button>                            
                          </div>  
                          <div style={{marginLeft: '-15px', marginTop: '180px',
                            textShadow : '2px 1px 1px #000000'}}> { data?.data.likes.length}
                          </div>
                          <div style={{marginRight: '-5px', marginTop: '176px'}}>
                            <button id="bt-Posts" onClick={() => this.UpdislikeFunc(data.id,data.data.dislikes)}
                              value={this.state.corDoDislike}
                              style={{color: data?.data.DislikeColor}}
                              >                   
                              
                              <i class="fas fa-thumbs-down" style={{textShadow : '2px 1px 1px #000000'}}></i>
                            </button>
                          </div>
                          <div style={{marginLeft: '-15px', marginTop: '180px',
                            textShadow : '2px 1px 1px #000000'}}> { data?.data.dislikes.length}
                          </div>                                    
                        </div>
                    </div>                
                  </div>
                    )
                  })
                }
              </div>
              </InfiniteScroll>
4

0 回答 0