如何從 Firestore 和 map 接收數據到一個元素？

Question

我創建了一個電子商務網站。 我可以將數據推送到 firestore，但現在我想創建一個訂單歷史頁面，並將接收到的數據 map 放入“產品”元素中。

我能夠將數據重新發送到控制台，但不能 map 。

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])

映射 -

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

我只是一個初學者，不知道如何進行。

Answer 1

看起來您忘記了在onSnapshot處理程序中調用setOrders ，這意味着您的 state 永遠不會更新，因此您的 UI 永遠不會使用來自數據庫的訂單重新呈現。

要解決該特定問題：

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