異步函式回傳空陣列，然后回傳所需的資料-導致應用程式崩潰

在我的 react 專案中，我有一個函式getDetails接收從資料庫呼叫 ( filteredVenue) 中檢索到的資料，然后控制臺記錄該資料。此函式存在于名為 的組件MidSection.js中。當這個組件被渲染并被getDetails呼叫時，以下內容會被記錄到瀏覽器中：

MidSection.js:9 []
MidSection.js:9 [{…}]

問題是這樣的——最初，一個空陣列被回傳，這意味著我嘗試訪問里面的資料filteredReviews，我得到一個undefined錯誤。

例如下面的代碼

  const extractRatings =   () => {
    const foodRatings = []
    filteredVenue[0].reviews.map((rating) => {
     foodRatings.push(rating.ratingFood)
    })
    return {foodRatings}
  }

  const {foodRatings} = extractRatings()

....產生以下錯誤

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'reviews')

...發生這種情況是因為該函式最初接收的是一個空陣列。關于如何解決這個問題的任何想法？

這是其余的代碼：

MidSection.js

import { useEffect,useState } from 'react'
import { convertToStars } from "../../helperFunctions";


const MidSection = ({ filteredVenue }) => {

const getDetails = async () => {
  const data =  await filteredVenue
  console.log(data)
}

getDetails()


  return (
    <div className="venue-page-mid">
      {filteredVenue.map((venue) => {
        return (
          <>
            <div className="venue-page-section left">
              <h2>Ratings and reviews</h2>
              <p>
                {venue.averageRating}
                {` `}
                {convertToStars(venue.averageRating)}
                {`  `}({`${venue.reviews.length} reviews`})
              </p>
              <div className="ratings">
                <h3>Ratings</h3>
              </div>
            </div>
            <div className="venue-page-section mid">
              <h2>Details</h2>
              <div className="details-container">
                <div className="details-item">
                  <h3>Cuisines</h3>
                  <p>Cafe</p>
                </div>
                <div className="details-item">
                  <h3>Special diets</h3>
                  <p>Vegetarian friendly, vegan options, gluten-free options</p>
                </div>
                <div className="details-item">
                  <h3>Meals</h3>
                  <p>Breakfast, Brunch, Lunch, After hours</p>
                </div>
              </div>
            </div>
          </>
        );
      })}
    </div>
  );
};

export default MidSection;

呼叫我的 firebase firestore 資料庫（在useVenue.js中）：

import { useState,useEffect } from 'react'
import { firebase } from './firebaseConfig'

export  function useVenues (){
  const [venues, setVenues] = useState([]);
  useEffect(() => {
    const venueArray = [];
    const getAllVenues =  () => {
       firebase
        .firestore()
        .collection("venues")
        .get()
        .then((snapshot) => {
          snapshot.forEach((venue) => {
            venueArray.push(venue);
          });
          setVenues(venueArray);
        });
    };
    getAllVenues();
  }, []);

  const [...venueData] = venues.map((venue) => {
    
    const { 
      name, 
      photoUrl, 
      averageRating, 
      numRatings, 
      type,
      address,
      phone,
      website,
      reviews } = venue.data();

    return ({
      name: name,
      photoUrl: photoUrl,
      averageRating: averageRating,
      numRatings: numRatings,
      type: type,
      id: venue.id,
      reviews:reviews,
      address:address,
      phone:phone,
      website:website
    })
  });
  return {venueData}
};

uj5u.com熱心網友回復：

只需在您感覺的任何地方添加一個檢查，它是未定義的或空的。

 const extractRatings =   () => {
    const foodRatings = []
    
  !!filteredVenue && filteredVenue.length>0 && filteredVenue[0].reviews.map((rating) => {
     foodRatings.push(rating.ratingFood)
    })
    return {foodRatings}
  }

  const {foodRatings} = extractRatings()

這必須解決您的問題。

標籤：javascript 反应 异步等待

上一篇：履行承諾后停止重新渲染

下一篇：如何訪問WeatherAPI圖示ID？