您遇到的问题可能是由于的异步性质
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])
.
-
我们删除了渲染函数中不必要的扩展和克隆操作。