我在响应页面刷新后从 firebase 获取数据

问题描述

我正在尝试使用 firebase 作为后端并作为前端做出反应，在您的订单页面中呈现订单列表。当我单击您的订单按钮时​​，它什么也不显示，刷新页面时它会显示数据。我希望在不刷新页面的情况下显示数据。 这是我用于以下问题的代码。

import React,{useState,useContext,useEffect} from 'react'
import { useParams } from 'react-router-dom'
import { JobContext } from '../../context/JobContext'
import { UserContext } from '../../context/UserContext'
import { db } from '../../Firebase'
import Order from './Order'
import './YourOrder.css';
import { Container,Row } from 'react-bootstrap';
import { IoIosShare } from "react-icons/io";
import { BsChevronRight } from "react-icons/bs";
import { Link } from 'react-router-dom'
import { PaymentContext } from '../../context/PaymentContext'
import { OrderContext } from '../../context/OrderContext'

const YourOrder = () => {
    //window.location.reload(false)
    const [user,setUser]=useContext(UserContext)
    const [order,setorder]=useContext(OrderContext)
    const { userrid } = useParams()
    const [payment,setPayment]=useContext(PaymentContext)

    useEffect(() => {

      var priceRef =  db.collection("clients").doc(userrid).collection("jobDetails")
      priceRef.orderBy("timestamp","desc").get().then(snapshot=>{
 
       setorder(snapshot.docs.map((doc) => ({ jobdetailid: doc.id,...doc.data() })))
 
 
      })
     
    },[user,order])

  
     
      

    return (       
      <div className="All_orders_main_container">
       <h2 className="text-center mb-2">Your Orders</h2>

        {order.length!==0 ?
         
          order.map(item=>{
        
            
            return item.payment_id!=="" ?<Link to={`/vieworder/${item.jobdetailid}/${userrid}`} >
            <Container className="your-orders">

            <div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 pl-0">
            </div>
            <div className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 bordered">
              <div className="row">
                <div className="col-xl-2 col-lg-2 col-md-4 col-sm-4 col-4">
                  <img src={item.image} alt="graphic_design_ordered-img" className="order_img"/>
                </div>
                <div className="col-xl-9 col-lg-9 col-md-6 col-sm-6 col-6 details">
                  <p className="job_name">{item.Name}</p>
                  <p className="job_deliverydate">ordered on {item.orderDate}</p>
                  {/* <p className="job_share pt-1"><IoIosShare className="share_icon"/>Share this item</p> */}
                </div>
                <div className="col-lg-1 col-md-2 col-sm-2 col-2 open_icon text-right">
                  <BsChevronRight/>
                </div>
              </div> 
            </div>
            </Container>
            </Link>
          : null
          })
         : 
         <h1 className="text-center" style={{color : '#c1c1c1',marginTop: 50}}>No Orders</h1>

        }    
      
      
    </div>
    )
}

export default YourOrder

请指导我一样

解决方法

您可以使用 onSnapshot()，它使您的应用“侦听”对 ta 文档或多个文档的更改。 https://firebase.google.com/docs/firestore/query-data/listen

,

我们知道数据传输需要时间，我们必须等待响应，或者，您必须使用 onSnapShot() 方法等待来自 firebase 的响应，然后设置您的项目列表，

根据评论，尝试从 useEffect 中删除 [user,order] 因为它只会在用户或订单列表发生更改时呈现您的内容，因此只需将其作为空列表传递，因此它会触发启动，

示例：

const [orders,setOrders] = useState([]);
useEffect(()=>{
   //The logic here will fire on startup,thus setting your order state from here will work 
    setOrders() //from here
},[])

这是本地设置的方法，如果你想让你的数据全局可用，我看到你正在使用上下文，因此使用Reducers来设置状态声明一个方法并在你获取数据后在此处调用它 请按照上述方法

快乐编码