代码之家  ›  专栏  ›  技术社区  ›  spencer

需要使用相同组件重新加载路线更改数据-React TSX

  •  0
  • spencer  · 技术社区  · 2 周前

    现在,我遇到了问题,因为我从Firebase Firestore收到的数据能够在两条路由上加载,但是,只有当我在路由链接上单击两次时,它才能加载,否则旧数据会在路由更改之间持续存在。我的目标是重置路线更改的数据。

    以下是我从Firestore收到的要显示的零件号网格的代码:

    var arrSnap:QueryDocumentSnapshot[] = [];
    
    async function populateGrid(){
    const currentRoute = useLocation()
    var program = currentRoute.replace('/parts-list/', '');
    
    
    var querySnapshot;
    if (program === 'First'){
         querySnapshot = await getDocs(collection(db, "Programs", "----", program, "-----", "Parts"));
    
    }else if(program === 'Second'){
         querySnapshot = await getDocs(collection(db, "Programs", "----", program, "-----", "Parts"));
    
    }else{
    
    }
    
    const _arrSnap:QueryDocumentSnapshot[] = [];
    
    querySnapshot.forEach((doc) => {
        _arrSnap.push(doc);
      });
      console.log(_arrSnap[0].get("PN"));
      arrSnap = [..._arrSnap];
      
     }
    
    
    
    
    export default function CardGrid(){
       populateGrid();
    
    
    
    
    return (
        <>
        <div className="tlCont">
            <div className="gridCont">
               {[...arrSnap].map((e, i) => {
    return (
    
    <div className="gridItm" key={arrSnap[i].get("PN")}>
        <Card > 
    Part Number: {arrSnap[i].get("PN")}
    <br></br>
    Description: {arrSnap[i].get("DESCRIPTION")}
    <br></br>
    Form Tool: {arrSnap[i].get("FORM TOOL")}
    <br></br>
    Trim Tool: {arrSnap[i].get("TRIM TOOL")}
    </Card>
    
        </div>
    )
    
    
               })}
            </div>
    
        </div>
        </>
        )
    }
    

    我怀疑这与在加载的组件内部调用函数“populateGrid()”有关。

    1 回复  |  直到 2 周前
        1
  •  1
  •   Sanket Sapate    2 周前

    您遇到的问题可能是由于的异步性质 populateGrid() 作用自从 populateGrid() 是异步的,它不会在的渲染周期之前完成 CardGrid() 完成。这意味着 arrSnap CardGrid() 在路线更改后首次渲染。

    为了确保在渲染之前更新数据,可以使用React的 useState 挂钩以管理的状态 arrSnap 并且当组件安装时或当路线改变时触发数据的填充。以下是重构代码的方法:

    import { useEffect, useState } from 'react';
    import { useLocation } from 'react-router-dom';
    
    export default function CardGrid() {
      const [arrSnap, setArrSnap] = useState([]);
    
      const populateGrid = async () => {
        const currentRoute = useLocation().pathname;
        const program = currentRoute.replace('/parts-list/', '');
    
        let querySnapshot;
    
        if (program === 'First' || program === 'Second') {
          querySnapshot = await getDocs(collection(db, "Programs", "----", program, "-----", "Parts"));
        } else {
          // Handle other cases if needed
        }
    
        const _arrSnap = [];
    
        querySnapshot.forEach((doc) => {
          _arrSnap.push(doc);
        });
    
        console.log(_arrSnap[0].get("PN"));
        setArrSnap([..._arrSnap]);
      };
    
      useEffect(() => {
        populateGrid();
      }, []); // Run once when component mounts
    
      return (
        <>
          <div className="tlCont">
            <div className="gridCont">
              {arrSnap.map((doc, i) => (
                <div className="gridItm" key={doc.get("PN")}>
                  <Card> 
                    Part Number: {doc.get("PN")}
                    <br />
                    Description: {doc.get("DESCRIPTION")}
                    <br />
                    Form Tool: {doc.get("FORM TOOL")}
                    <br />
                    Trim Tool: {doc.get("TRIM TOOL")}
                  </Card>
                </div>
              ))}
            </div>
          </div>
        </>
      );
    }
    

    在这个重构的代码中:

    1. 我们使用 使用状态 挂钩以管理的状态 arrSnap .
    2. 我们使用 useEffect 挂钩以触发 populateGrid() 组件安装时的功能( [] 因为依赖数组意味着它在组件安装时运行一次)。
    3. 在…内 populateGrid() ,我们使用设置状态 setArrSnap([..._arrSnap]) .
    4. 我们删除了渲染函数中不必要的扩展和克隆操作。