実現したいこと
こんにちは、はじめまして。React17でページング機能を作成したいのですが
うまくいかず困っています。
もし何か対処方法わかる方がいれば、ご教示ください。
【開発言語】TypeScript
【使用フレームワーク】React16.8
【使用ライブラリ】MaterialUi
【使用バックエンド】Firebase
【実現したいこと】Firebaseのクエリを使って、データを５件ずつ表示させる。
発生している問題・分からないこと
Firebaseのドキュメントを参考にしクエリを使って５件ずつデータを表示させるために
現在のページ数×表示件数-1で、インデックス番号を指定してデータを表示させたいのですが、
現在のページ数が２回読み込まれて、インデックスがundefinedになり、
エラー「Uncaught (in promise) FirebaseError: Function startAfter() called with invalid data. Unsupported field value: undefined」と表示されます。
該当のソースコード
const orderData = db .collection(`userInformation`) .doc(currentUserUid) .collection("order"); // 画面に表示する商品リスト const [orderList, setOrderList] = useState<Array<Order>>([]); // ページごとに表示する件数 const [productsPerPage, setProductsPerPage] = useState(5); // 現在のページ const [currentPage, setCurrentPage] = useState(1); // 注文データの全体の件数 const [orderLength, setOrderLength] = useState(1); // 次ページを押したときに始まってほしいindexの数 const [startFrom, setStartFrom] = useState(productsPerPage - 1); /** * 注文情報を表示する * * 1.firebaseから情報を取得してくる * 2.クエリを使って並び替える * 3.件数を制限する * 4.現在のページ数が１以上のとき、クエリで制限したデータを表示する * */ const getOrderHistory = async () => { // firebaseからすべての注文情報を取得し、クエリを使って並び替える let query = orderData.orderBy("orderDate", "desc"); // データの全体の件数を取得する const allProductLength = (await query.get()).docs.length; setOrderLength(allProductLength); //全体の件数が表示件数を上回った場合、データの数を表示件数に制限する query = productsPerPage > 0 && allProductLength > productsPerPage ? query.limit(productsPerPage) : query; // 現在のページ数が１以上の場合、次のデータを取得する if (currentPage > 1) { const orderData = await query.get(); const lastSnapshot = orderData.docs[startFrom * currentPage]; const next = query.startAfter(lastSnapshot).limit(productsPerPage); query = next; // レンダリングの問題で二重に表示されるデータを消しました setOrderList( orderList.filter((order, index) => index > productsPerPage - 1) ); } const user = await db .collection("userInformation") .doc(currentUserUid) .get(); const userData = user.data(); await query.get().then((snapshot) => { snapshot.forEach((doc) => { const eachOrder = doc.data(); const newTimeStamp = new Date(eachOrder.orderDate.toDate()); setOrderList((prev) => [ ...prev, { id: eachOrder.userId, userId: eachOrder.userId, status: eachOrder.status, totalPrice: eachOrder.totalPrice, orderDate: newTimeStamp, destinationName: eachOrder.destinationName, destinationEmail: eachOrder.destinationEmail, destinationZipcode: eachOrder.destinationZipcode, destinationAddress: eachOrder.destinationAddress, destinationTel: eachOrder.destinationTel, deliveryTime: eachOrder.deliveryTime, paymentMethod: eachOrder.paymentMethod, user: { id: userData?.id, name: userData?.name, mailAddress: userData?.mailAddress, password: userData?.password, zipcode: userData?.zipcode, address: userData?.address, telephone: userData?.telephone, }, orderItemList: eachOrder.orderItemFormList, }, ]); }); }); }; const handleChangePage = (value: number) => { setCurrentPage(value); }; const changePage = (event: any, pagenum: number) => { handleChangePage(pagenum); }; useEffect(() => { getOrderHistory(); }, [currentPage]); return ( <TableContainer className="TableContainer" component={Paper}> …中略（テーブルの中身） <Pagination defaultPage={1} page={currentPage} count={Math.ceil(orderLength / productsPerPage)} onChange={changePage} color="primary" /> </TableBody> </Table> </TableContainer> ); };
試したこと・調べたこと
上記の詳細・結果
代替えの方法がわからず、困っています。
補足
特になし
0 コメント