react.jsとfirebaseを使ってSNSのようなアプリを作成していますが、以下のようなエラーが出て困っています。
useEffectを使ってfirebase内のユーザー投稿データを抽出しようとしているのですが、useStateのsetLists(Lists)をすると上のようなエラーが出てしまいます。
該当コードは下記になります。
import React, {useState, useEffect, useContext} from "react";
import { AuthContext } from "../providers/AuthProvider";
import * as Api from "../service/api";
const MessageSender=()=>{
const currentUser =useContext(AuthContext);
const [inputComment, setInputComment] =useState("");
const [lists, setLists]=useState([]);
useEffect(async ()=>{
const Lists =await Api.initUserPost();
setLists(Lists);
console.log(Lists);
},[])
api.js
export const initUserPost = async () =>{
const postsList =await db.collectionGroup("posts").orderBy("timestamp","desc");
return postsList.get().then((snapShot)=>{
let postsList =[];
snapShot.forEach((doc)=>{
postsList.push({
uid: doc.data().uid,
id: doc.id,
comment: doc.data().comment
});
});
return postsList;
})}
また、エラー部分と思われる setLists(Lists)
を削除してChoromeのconsole画面を見たところ、データは抽出できているようです。
かなりの時間ググったのですが、いまだに解決方法がわかりませんでした。
ご助言頂ければ幸いです。
よろしくお願いします。