javascriptの非同期処理が待ってくれません。

Question

DetaiDashboard3.js、DetailDashboardList.js、api.jsがあります。
コードは以下のとおりです。

DetaiDashboard3.js

const DetailDashboard3 = () => {
    const [kuchikomis, setKuchikomis] = useState([]);

    useEffect(() => {
        fetch();
    }, [])

    const preid = useParams();     
            const stringprename = JSON.stringify(preid);
            const obj = JSON.parse(stringprename);

    const fetch = async() => {
            const id = obj.id;
            const data = await Api.openDetailDashboard(id);
            console.log(data[0]); //1
            await setKuchikomis(data);
            console.log(data[0]); //2
            console.log(kuchikomis); //3
    }
    const classes = useStyles();
    return (
        <div className={classes.root}>
        <h1>詳細ページ</h1>
            <DetailDashboardList kuchikomis={kuchikomis} fetch={fetch} />
        </div>
    )
};
    
export default DetailDashboard3;

DetailDashboardList.js

const DetailDashboardList = (props) => {
    const classes = useStyles();
    const kuchikomilist = props.kuchikomis.map((kuchikomi) => {
        return (            
        <ListItem key={kuchikomi.id}>
        <h1>kuchikomilistの内容</h1>
        省略
        </ListItem>
            )
    }
    );
    return (
        <div className={classes.root}>
            <h2>最近の投稿</h2>
            <ul className={classes.ul}>{kuchikomilist}</ul>
        </div>
    )
}
export default DetailDashboardList;

api.js

export const openDetailDashboard = async(id) => {
    const kuchikomi = await db.collection("kuchikomi").doc(id);
    let kuchikomis = [];
    kuchikomi.get().then((doc) => {
        if (doc.exists) {            
            kuchikomis.push({
                id: doc.id,
                content: doc.data().content,
                kind: doc.data().kind,
                lowTemp: doc.data().lowTemp,
                Images: doc.data().Images,
            });
            console.log(kuchikomis); //4
            console.log(kuchikomis[0]); //5
        } else {
        }
    }).catch((error) => {
    });
    return kuchikomis;
};

結果
ブラウザの表示は、以下の２行のみ表示され、DetailDashboardList.jsの省略の部分は表示されません。

　詳細ページ
最近の投稿

しかし、サーバーを起動させた状態でDetailDashboardList.jsの一部（例えば<h1>タグ内の文言）を編集して保存をかけると省略の部分も表示されるのです！
もちろん本来は、省略の部分も初めから表示させたいです。

コンソールは、以下の順序で呼ばれ、//1と//2はundefinedで、//3は空の配列です。
DetaiDashboard3.js内で示した//1
DetaiDashboard3.js内で示した//2
DetaiDashboard3.js内で示した//3
api.js内で示した//4
api.js内で示した//5

このようなことが起こる原因は、思うように非同期処理が機能していないことが原因と考えたのですが解決策を知りたいです。
自分としては調べ尽くしたのですが分かりませんでした。
初歩的な質問で申し訳ありませんがよろしくお願いします。

Comments

[m.ts10806]

タイトルが気になりました。
非同期処理だからそもそも待ちませんよ。

[teradas]

確かにそうですね。
ご指摘ありがとうございます。

Answer 1

思うように非同期処理が機能していないことが原因と考えた

Promiseやasync/awaitの使い方に不備があります。
この辺込み入って学習は大変だし思うように進まないところがありますので、
腰を据えてちょっとずつ理解していきましょう。

// api.js
export const openDetailDashboard = async id => {
    // async関数内ではPromiseの処理に失敗したときの挙動であるcatchメソッドを
    // 普通のtry-catch構文で確保することが可能
    try {
        const kuchikomi = await db.collection("kuchikomi").doc(id);

        // await構文はPromiseインスタンスのthenメソッドを叩いて
        // コールバック関数の第一引数を引っ張り出す効果がある。
        // つまりこう書き変えることが可能。
        const doc = await kuchikomi.get();

        let kuchikomis = [];
        // これだと要素数1個の配列にしかならんけど大丈夫？どっか勘違いしてるんじゃね？
        // 多分for...of文でループした方が良いけど、データ構造わからんから放置
        if (doc.exists) {
            kuchikomis.push({
                id: doc.id,
                content: doc.data().content,
                kind: doc.data().kind,
                lowTemp: doc.data().lowTemp,
                Images: doc.data().Images,
            });
        }
        return kuchikomis;
    } catch (e) {
        // 失敗時のエラーはデバッグができないので絶対に握りつぶさないこと、
        // 最低限このようにエラーメッセージを出力するようにする。
        console.error(e);
        return []; // この行なしでundefined返すのも正常な気がしないでもない
    }
}

そもそも省略が多すぎでpropsで渡したfetch使ってないやんとかツッコミどころはありますが、
openDetailDashboardがまともな値を返してくれないという一点に関しては
これで先に進めるようになるでしょう。

---

以下解説。

JavaScriptには待つという処理が存在しません。
それを実現する為の手法がイベントです。

JavaScriptに於ける非同期処理は、
「完了条件と実行して欲しい関数」をセットにイベント登録を行い、
処理を全て終了させた後にイベントループ(完了条件を満たしているか巡回する仕組み)で検知してもらって
ぶら下がっている関数を実行してもらうまで待つ必要があります。

よく使われる例としてはこんな感じ

console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);
// 1 -> 3 -> 2の順番で表示される

「イベント登録します、0ms経過している事を検知したら() => console.log(2)を実行してね」というお願いなので、
console.log(3)までの処理の実行を完了させたNode.jsさん
次にイベントループ巡回を行い、0ms経過というイベント達成条件を精査します。
条件達成しているから() => console.log(2)を実行する。

こういう流れなので絶対に1 -> 3 -> 2の順序での実行となります。
質問文のopenDetailDashboardのkuchikomi.get().then(fn)はまさにこれ。
「条件達成したら後でやっておいてね」というお願いをしているわけですが、
returnで値を返す処理の方が先に走ります。
つまり[]の空配列を返す関数になっています。

※new promiseで定義した中身そのものの動作は同期処理で行われるが、
dbアクセスとか挟んでるようなので、イベント登録の向こう側に追いやられて実行が間に合ってなさそう。

回答のコードではthenを叩いている箇所をPromiseのインスタンスと決め打ちし、
一度動作を停止してPromiseの状態が完了になるまで待つawait構文を使って書き直しました。
これにより待つ挙動を実現できます。

Comments

[teradas]

ありがとうございます！
思うような挙動となりました。
まだまだ初心者ですが教えていただいたことをしっかり学んでいきたいと思います。
早速の回答助かりました。
ありがとうございました。