异步函数返回空数组，然后返回所需的数据 - 导致应用程序崩溃

Question

在我的 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}
};

Answer 1

只要在你认为是未定义或 null 的地方添加一个检查。

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

  const {foodRatings} = extractRatings()

这一定能解决您的问题。

异步函数返回空数组，然后返回所需的数据 - 导致应用程序崩溃

Async function returning empty array, and then the desired data - causing app to crash

javascript

async-await

reactjs