質問編集履歴

コメントの追加

2020/12/18 08:56

投稿

kobaryo04ysh

スコア29

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -411,3 +411,91 @@
 ご回答お待ちしております。
+## 追記
+useEffect内にてリスナーのデタッチのためのunsbscribeをreturnしていますが、ご指摘いただいた通り、returnを消して`unsubscribe()`だけに変更したらレンダリングが抑えられる様になりました。
+しかしながら、時間が経って再びconsoleに出力すると、直す前と変わらず無限にレンダリングがされてしまっていました。その上で、リアルタイムのコメントの反映もされなくなってしまったので、`onSnapshot((snapshots) => {})`の外に`return unsubscribe;`とすることで、リアルタイムのコメントの反映の部分は直ったのですが、依然として無限にレンダリングされる現象が直りません。
+```CommentForm.tsx
+  useEffect(() => {
+    let comments: any = [];
+    const unsubscribe: any = db
+      .collection("posts")
+      .doc(id)
+      .collection("comments")
+      .orderBy("createdAt", "desc")
+      .onSnapshot((snapshots) => {
+        snapshots.docChanges().forEach((change) => {
+          const data = change.doc.data({ serverTimestamps: "estimate" });
+          const changeType = change.type;
+          switch (changeType) {
+            case "added":
+              comments.push(data);
+              break;
+            case "modified":
+              const index = comments.findIndex(
+                (comment: any) => comment.id === change.doc.id
+              );
+              comments[index] = comment;
+              break;
+            case "removed":
+              comments = comments.filter(
+                (comment: any) => comment.id !== change.doc.id
+              );
+              break;
+            default:
+              break;
+          }
+        });
+        setComment(comments);
+      });
+      return unsubscribe; //変更箇所
+  }, []);
+```