нумерация страниц в firestore с reactjs (последний видимый документ в моем проекте не определен после монтирования данных) - PullRequest
Новая
       92

нумерация страниц в firestore с reactjs (последний видимый документ в моем проекте не определен после монтирования данных)

0 голосов
/ 31 марта 2020 
import React from "react";
import "./styles.css";
import { db } from "./firebase";

export default function App() {
  const [allProducts, setAllProducts] = React.useState([{}]);
  const [current, setCurrent] = React.useState(1);
  const [lastVisible, setLastVisible] = React.useState(null);
  React.useEffect(() => {
    getProducts();
    return () => getProducts();
  }, []);

  function getProducts() {
    db.collection("Products")
      .limit(3)
      .get()
      .then(doc => {
        let products = [];
        doc.forEach(function(doc) {
          console.log(doc.id, " => ", doc.data());
          products.push(doc.data());
        });
        setAllProducts(products);
        let last = products[products.length - 1];
        setLastVisible(l => last);
      });
  }


  React.useEffect(() => {
    db.collection("Products")
      .limit(3)
      .orderBy("dateEntered", "desc")
      .startAfter(lastVisible)
      .get()
      .then(doc => {
        doc.forEach(function(doc) {
          console.log(doc.id, " => ", doc.data());
        });
        let last = doc[doc.length - 1];
        setLastVisible(last);
      });
  }, [current]);

  function previousData() {
    if (current > 1) {
      setCurrent(current - 1);
    }
  }
  function nextData() {
    if (current <= allProducts.length / 3) {
      setCurrent(current + 1);
    }
  }
  console.log("here is ", lastVisible);
  return (

    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={previousData}>previous</button>
      <button onClick={nextData}>next</button>
    </div>
  );
}

проблема заключается в разбивке на страницы пожарного хранилища с использованием метода startAfter в разбивке на страницы пожарного хранилища, когда данные монтируются, setLastVisible устанавливается последним документом, но после монтирования он получает неопределенное значение, и вы можете проверить по этой ссылке https://codesandbox.io/s/stoic-flower-2zxvk в Codesanbox, и вы можете исправить мою проблему, что любой может помочь

...