如何从 Firestore 和 map 接收数据到一个元素？

Question

I created an e-commerce website. I can push data into firestore but now I want to create an order history page and map the received data into a "Product" element.

I am able to reveice data into console but cannot map it.

const [{basket, user }, dispatch] = useStateValue();
    const [order, setOrder] = useState([]);

    useEffect(()=>{
      if (user){
        const orderData = onSnapshot(doc(db, "orders", user?.email), (doc) => {
        console.log("Current data: ", doc.data().order);
    });
      }else{
        setOrder([])
      }
    }, [user])

Mapping -

<div className='orderPageProduct'>
  {order?.map(order => (
    <OrderProduct order={order} />
  ))}
</div>

I am just a beginer and don't know how to proceed.

Answer 1

It looks like you forgot to call setOrders in the onSnapshot handler, which means your state is never updated and your UI is thus never re-rendered with the orders fro the database.

To address that specific problem:

useEffect(() => {
  if (user) {
    onSnapshot(doc(db, "orders", user?.email), (doc) => {
      const orderData = doc.data().order; // 👈
      setOrder([orderData]); // 👈
    });
  } else {
    setOrder([])
  }
}, [user])