78374


react.jsとfirebaseを使ってSNSのようなアプリを作成していますが、以下のようなエラーが出て困っています。

[![画像の説明をここに入力](https://i.stack.imgur.com/Ca2e4.png)](https://i.stack.imgur.com/Ca2e4.png)

useEffectを使ってfirebase内のユーザー投稿データを抽出しようとしているのですが、useStateのsetLists(Lists)をすると上のようなエラーが出てしまいます。

該当コードは下記になります。

[code]

    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);
    },[])
    
[/code]

api.js

[code]

    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;
    })}
    
[/code]

また、エラー部分と思われる `setLists(Lists)` を削除してChoromeのconsole画面を見たところ、データは抽出できているようです。

[![画像の説明をここに入力](https://i.stack.imgur.com/Bicpn.png)](https://i.stack.imgur.com/Bicpn.png)

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

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

よろしくお願いします。


CC BY-SA 4.0
2021-07-23T05:05:47.293
78373
2021-07-23T06:50:42.043
2021-07-23T05:33:07.377
3060
47406
question
reactjs firebase
Objects are not valid as a React child (found: [object Promise]). のエラーを解決したい


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

[code]

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

**追記**

`setLists` でPromiseを返却しています

[code]

    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;
    })
    
[/code]

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

[code]

    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;
    
[/code]


CC BY-SA 4.0
2021-07-23T06:07:51.010
78374
2021-07-23T06:50:42.043
2021-07-23T06:50:42.043
298
298
78373
answer