React 如何解决 async await 未定义返回值的问题 function

Question

如果您运行以下代码 {i('salon-id')} 将变为未定义。

我认为原因是jsx是在从async await的i function获取信息之前加载的，但我不知道如何解决。

我想知道从异步等待中读取信息后如何在 jsx 中显示信息。

我正在使用 firebase v9。

import React, { useState, useEffect } from "react"
import { Link } from 'react-router-dom';
// firebase関連
import { db } from "../../../firebaseConfig"
import {
    collection,
    orderBy,
    query,
    getDocs,
    limit,
    where
} from 'firebase/firestore'
import 'firebase/compat/auth'
// 画像
import MainTopImg from '../../../images/imecon-personal-color.jpeg'
import '../../../styles/Top.scss'

const MobileContents = () => {   
    const [newSalonList, setNewSalonList] = useState([])

    useEffect(() => {        
        (async () => {
            const salons = query(collection(db, "salon"), orderBy("createAt", "desc"), limit(5));
            const querySnapshot = await getDocs(salons);
            let salonList = [];
            await querySnapshot.forEach((doc) => {
                salonList = [...salonList, {
                    salonId: doc._document.data.value.mapValue.fields.salonId.stringValue,
                    salonName: doc._document.data.value.mapValue.fields.salonName.stringValue,
                    salonNameKana: Boolean(doc._document.data.value.mapValue.fields.salonNameKana) ? '【' + doc._document.data.value.mapValue.fields.salonNameKana.stringValue  + '】': '',
                    address: Boolean(doc._document.data.value.mapValue.fields.access) ? doc._document.data.value.mapValue.fields.access.stringValue: '',
                    mainImageUrl: doc._document.data.value.mapValue.fields.mainImageUrl.stringValue,
                    menuTitle: doc._document.data.value.mapValue.fields.mainImageUrl.stringValue,
                    price: ''
                }]
            })
            setNewSalonList(salonList)
        })();
    }, [])

    function i (salonId) {
        (async () => {
            try {
                const q = query(collection(db, "salon", salonId, "menu"), where("top", "==", true));
                const querySnapshot2 = await getDocs(q);
                await querySnapshot2.forEach((doc) => {
                    // doc.data() is never undefined for query doc snapshots
                    console.log(doc.data().menuTitle);
                    return(doc.data().menuTitle)
                });
            } catch(err) {
                console.log(err)
                return 'err'
            }
        })()
    }

    return (
        <div>
            <img src={MainTopImg} alt="mainTopImg" className="mainImg"/>
            <Link to="/mypage">マイページ</Link>
            <div className="form">
                <form action="/search" method="GET" className="search_container">
                    <input type="text" name="query1" placeholder="サロン名・エリア・メニューなどから検索" />
                    <input type="submit" /> 
                </form>
            </div>
            <div>
                <div className="newSalonTitleParent">
                    <p className="newSalonTitle">｜ 新着のサロン</p>
                </div>
                {newSalonList.map((data) => {
                    console.log(i('salon-id'))
                    return (
                        <li key={data.salonId}>
                            <img src={data.mainImageUrl} alt="" />
                            <Link to={'/salon/' + data.salonId}>
                                <p>{data.salonName}{data.salonNameKana}</p>
                            </Link>
                            <p>{data.address}</p>
                            <div>{}</div>
                        </li>
                    )
                })}
                <div>{i('salon-id')}</div>
            </div>
        </div>
    );
}

export default MobileContents;

Answer 1

我建议 go 通过 react-query 库，你可以使用 useQuery 钩子从 db 中获取数据，在渲染时你只需要寻找加载标志，一旦从 db 中获取数据，它将在 ui 中呈现

Answer 2

你从{i('salon-id')}得到 undefined 因为 forEach function 返回 undefined 而不是你期望返回的。

forEach() 对每个数组元素执行一次 callbackFn function； 与 map() 或 reduce() 不同，它总是返回未定义的值并且不可链接。 典型的用例是在链的末端执行副作用。

如官方 MDN 文档中所述： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach