无法加载项目数组

Question

DonationList.js

import React, { useEffect, useState } from "react";
import { getDocs, collection } from "firebase/firestore";
import { auth, db } from "../firebase-config";
import Donation from "./Donation";

const DonationList = () => {
    const [donations, setDonations] = useState([]);

    //loadDonations
    const loadDonations = async () => {
        const donationsCollectionRef = collection(db, "donations");
        const querySnapshot = await getDocs(donationsCollectionRef);
        querySnapshot.forEach(async (donationSnap) => {
            const items = [];
            const itemsCollectionRef = collection(db, "donations", donationSnap.id, "items");
            const itemquerySnapshot = await getDocs(itemsCollectionRef);
            itemquerySnapshot.forEach((itemSnap) => {
                items.push([
                    {
                        itemType: itemSnap.data().itemType,
                        quantity: itemSnap.data().quantity,
                    },
                ]);
            });

            setDonations((prevDonation) => {
                return [
                    ...prevDonation,
                    {
                        type: donationSnap.data().type,
                        donor: donationSnap.data().donor,
                        requestor: donationSnap.data().requestor,
                        items: items,
                    },
                ];
            });

            items = [];
        });
    };

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

    return (
        <div className="grid">
            <div className="col-12">
                <div className="card">
                    <h5>Donation List</h5>
                    {donations.map((donation) => (
                        <Donation donation={donation} />
                    ))}
                </div>
            </div>
        </div>
    );
};

const comparisonFn = function (prevProps, nextProps) {
    return prevProps.location.pathname === nextProps.location.pathname;
};

export default React.memo(DonationList, comparisonFn);

Donation.js

import React, { useState } from "react";

const Donation = (props) => {
  
    return (
        <div className="card">
            <h5>Donation Type</h5>
            {props.donation.type}
            <h5>Requestor</h5>
            {props.donation.requestor}
            <h5>Donor</h5>
            {props.donation.donor}
            <h5>Items</h5>
            {props.donation.items.map((item) => (
                <Item item={item} />
            ))}
        </div>
    );
};

const Item = (props) => {
   console.log(props.item)
    return (
        <React.Fragment>
            ItemType: {props.item.itemType}
            Quantity: {props.item.quantity}
        </React.Fragment>
    );
};

export default Donation;

These two code snippets is me trying to take data from firebase and display it. When I console.log(props.item) in the Item component function, the item seems to be an array. screenshot of the log Shouldn't it be an object like props.donation? Its my first time using reactJS so I can't seem to find the problem

Answer 1

Check this block in your code.

const items = [];
itemquerySnapshot.forEach((itemSnap) => {
  items.push([
    {
      itemType: itemSnap.data().itemType,
      quantity: itemSnap.data().quantity,
    },
  ]);
});

You have already defined an array and added the item as an array. That is why you are accessing item in Donations ; it's returning as an array type.

{props.donation.items.map((item) => (
   <Item item={item} />
))}

Change your loadDonations method like this, and it will work correctly.

itemquerySnapshot.forEach((itemSnap) => {
  items.push(
    {
      itemType: itemSnap.data().itemType,
      quantity: itemSnap.data().quantity,
    },
  );
})