如何从 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])