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

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

react-hooks google-cloud-firestore firebase typescript reactjs

spencer · 技术社区 · 3 月前

现在,我遇到了问题,因为我从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 回复 | 直到 3 月前

Sanket Sapate 3 月前

您遇到的问题可能是由于的异步性质 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>
    </>
  );
}

在这个重构的代码中:

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