1

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画面を見たところ、データは抽出できているようです。

画像の説明をここに入力

かなりの時間ググったのですが、いまだに解決方法がわかりませんでした。

ご助言頂ければ幸いです。

よろしくお願いします。

1 件の回答 1

0

useEffectはawaitの関数(Promiseになります)を受け取りません
以下のコードのように即時関数から呼び出すと動くと思います

useEffect(()=>{
    (async () => {
        const Lists = await Api.initUserPost();
        setLists(Lists);
        console.log(Lists);
    })()
},[])

追記

setLists でPromiseを返却しています

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;
})

thenで受けずにawaitで返却を受けてください。

const snapShot = await postsList.get()
let postsList =[];
snapShot.forEach((doc)=>{
postsList.push({
  uid: doc.data().uid,
  id: doc.id,
  comment: doc.data().comment
  });
});
return postsList;
8
  • @sugumuraさん、ご助言ありがとうございます。早速、お教え頂いたコードで実行してみましたが、変更前と同じエラーが帰ってきました。「Unhandled Rejection (Error): Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.」 Commented 2021年7月23日 6:25
  • 元の回答に追記しました
    – sugumura
    Commented 2021年7月23日 6:51
  • @sugumuraさん、何度もほんとにありがとうございます。ご助言通りにやってみましたが、今回もuseEffectの方で同様のエラーが出てしまいます。 Commented 2021年7月23日 7:35
  • useEffect内の Lists 変数をsetListsの前の行でconsole.log出力してください。画像のエラー内容はsetLists関数は配列を受け取ることを期待しているのにPromsieを渡しているのでエラーとなっています。もしLists変数が配列でないならそこを改修する必要があります
    – sugumura
    Commented 2021年7月23日 9:15
  • useEffect内にsetListsがあるとエラーになるので、setListsを消して、Lists変数をconsole.logで出力しましたが、質問時に示したコンソール画像と同様になりました。配列ですよねえ(すいません、初心者なもので、配列という見方が合っていますか?)。今、同様のコードを別の名前・別のファイルで書いてみると、なぜか動きました。結局、何が悪かったのかわからないままです。 Commented 2021年7月24日 0:12

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。