Javascript 我在react中刷新页面后从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

import React，{useState，useContext，useffect}来自“React”
从“react router dom”导入{useParams}
从“../../context/JobContext”导入{JobContext}
从“../../context/UserContext”导入{UserContext}
从“../../Firebase”导入{db}
从“/订单”导入订单
导入“/YourOrder.css”；
从“react bootstrap”导入{Container，Row}；
从“反应图标/io”导入{IOOSShare}；
从“反应图标/B”导入{BsChevronRight}；
从“react router dom”导入{Link}
从“../../context/PaymentContext”导入{PaymentContext}
从“../../context/OrderContext”导入{OrderContext}
constYourOrder=（）=>{
//window.location.reload（false）
const[user，setUser]=useContext（UserContext）
const[order，setOrder]=useContext（OrderContext）
const{userrid}=useParams（）
const[payment，setPayment]=useContext（PaymentContext）
useffect（（）=>{
var priceRef=db.collection（“客户”）.doc（userrid.collection（“作业详细信息”）
priceRef.orderBy（“timestamp”，“desc”）.get（）。然后（快照=>{
setOrder（snapshot.docs.map（（doc）=>（{jobdetailid:doc.id，…doc.data（）}）））
})
}，[用户，订单]）
报税表（
你的命令
{顺序.长度！==0？
order.map（项目=>{
退货项目。付款id！==“”？
{item.name}
在{item.orderDate}上订购的

{/*
共享此项目
*/}
：null
})
: 
没有命令
}    
)
}
导出默认订单

---

请为我提供相同的指南

您可以使用

onSnapshot（）

，它使您的应用程序“侦听”ta文档或多个文档的更改

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

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

例如：

const[orders，setOrders]=useState（[]）；
useffect（（）=>{
//这里的逻辑将在启动时启动，因此从这里设置订单状态将起作用
setOrders（）//从这里开始
}, [])

这是本地设置的方法，如果您希望数据全局可用，我看到您使用的是上下文，因此使用reducer来设置状态并声明一个方法，并在获取数据后在这里调用它 请遵循上述方法

---

Happy Coding

您好，

您的订单按钮在哪里

？该按钮位于主页的导航栏上，当有人单击该按钮时，它会将其重定向到您的订单页面我也使用了onsnapshot，但它的数据仍然没有提取，刷新后它会显示我也使用了onsnapshot方法，但结果仍然相同删除用户和顺序后结果仍然相同这是因为您在脚本之外设置它，就像您使用useContext而不是useState一样，它不再工作，我尝试了几乎所有的方法，但页面刷新后会显示数据。请使用减缩器，从全局上下文中，并在其中设置数据。。