質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

Q&A

0回答

816閲覧

Next.jsで作成しているアプリで、いいね機能を実装したい

kimch

総合スコア8

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

0グッド

0クリップ

投稿2021/10/12 05:38

実現したいこと

・いいね機能の実装
〜〜〜詳細〜〜〜
・ボタンを押下した際にLikesコレクションから、押下した業務データと、ログインしているユーザーの情報が格納されているドキュメントを探し、それがなければ新たにドキュメントを作成、あれば既に存在しているドキュメントを削除する。

問題点/エラー内容/エラー文章

・firestoreからデータの抽出をした際に、ドキュメントがundefinedになっており、、追加する記述が走ってしまう。
・結果、もう一度同じいいねボタンを押下しても、最初にデータが追加される。

処理の流れ

①いいねボタンを押下する。
②押下されている業務データと、現在ログインしているユーザーの情報が登録されているドキュメントが存在しているか調べる。
③ドキュメントが存在しているかどうかで場合わけする。

該当ソースコード/コマンド

const handleClickFavo = async (business) => { const likedCollection = await db .collection("Likes") .where("businessId", "==", business.businessId) .where("userId", "==", auth.currentUser.uid) .get(); // console.log({ businessId: business.businessId }); // console.log({ auth: auth.currentUser.uid }); console.log({ likedCollectionの値: likedCollection.exists }); if (likedCollection.exists === undefined) { db.collection("Likes").add({ userId: auth.currentUser.uid, businessId: business.businessId, }); console.log("追加完了"); } else { db.collection("Likes").doc(doc.id).delete(); } likedCollection.forEach((doc) => { console.log(doc.data()); console.log(doc.exists); if (doc.exists === true) { db.collection("Likes").doc(doc.id).delete(); console.log("削除しました"); } else { db.collection("Likes").add({ userId: auth.currentUser.uid, businessId: business.businessId, }); } }); };

うまくいっている部分

・データの登録。
・既に登録されているデータ(いいねボタンが押下されているデータ)の削除。
※既に登録されている業務データをもう一度クリックすると、もう一度データが登録され、それより前に登録されていたデータが削除される。
→いいねの解除が完了しない。

エラー原因となり得る部分

likedCollection.forEach((doc) => {
の部分。
likedCollectionがundefinedとなってしまい、最初にデータが追加されてしまう。

試したことや調べたこと

-console.logをしこんでエラー箇所を特定した。
最初は、何も情報がない状態なので、likedCollectionはundefined。
その後、情報を登録。その際、likedCollectionはundefinedのため、forEach以下の記述は動かなかった。
もう一度押すと、最初はundefinedだが、情報がまず追加され、その後likedCollectionに対してforEachhが働き、最初に登録されている情報が削除される。
likedCollection.forEach(( doc)=>{
if(doc.exists  のような記述をしたものの、likedCollectionがundefinedのため動かなかったため、上記のような記述をしている。

#最後に
皆様のお力をお借りできたらと思います。
お忙しいと思いますが、何卒、よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問