我有一個從兩個不同的 RTK 查詢中獲取的陣列和映射。陣列 A 包含用于訪問映射 B 中的值的元資料（Id）。因此，它們的新近度需要同步，以便 B 中的每個值在陣列 A 中都有一些 ID。
我從服務器獲取這兩個資料，然后將一些過濾器應用于映射 B，以便可能減少值的數量。這樣做是這樣的：
const queryAResult = useRTKQueryA(); // arrayA = queryAResult.data
const queryBResult = userRTKQueryB(); // mapB = queryBResult.data
const [filteredMapB, setFilteredMapB] = useState({});
// UseEffect is used here because queryBResult changes as the query is refetched under the appropriate conditions.
useEffect(() => {
if (queryBResult.data) {
const mapB = queryBResult.data;
const filtered = filter(mapB); // Generic filter
setFilteredMapB[filtered];
}
}, [queryBResult.data]); // mapB = queryBResult.data
// Here I render a component which is dependent on using arrayA to make accesses to filteredMapB.
我面臨的問題是，雖然我可以聽取 arrayA 和 mapB 的查詢結果以確保它們都可用（通過資料、isLoading、isFetching 等），但我不確定如何確保過濾程序在使用arrayA 訪問filteredMapB 之前發生了useEffect。目前出現問題是因為我使用最新可用的arrayA 版本來訪問filteredMapB（這并不總是最新的，因為過濾需要時間），所以arrayA 最終包含不在filteredMapB 中的元素。
我怎樣才能同步這些？理想情況下，該解決方案很適合一個布爾運算式，我可以使用它來有條件地呈現串列或加載微調器。
我曾考慮將兩個陣列都放在本地狀態變數中，并使用 useCallback 為這兩個陣列創建 getter，這將通過使用依賴陣列回傳同步值，但更喜歡不同的解決方案。
uj5u.com熱心網友回復：
我根本不會useEffect在這里使用。這是useMemo一個更方便的地方，因為它是同步發生的，你永遠不會在兩者之間進行渲染。
const queryAResult = useRTKQueryA(); // arrayA = queryAResult.data
const queryBResult = userRTKQueryB(); // mapB = queryBResult.data
const filteredMapB = useMemo(() =>
if (queryBResult.data) {
const mapB = queryBResult.data;
const filtered = filter(mapB); // Generic filter
return filtered
}
}, [queryBResult.data]); // mapB = queryBResult.data
if (!queryAResult || !filteredMapB) {
return <Spinner />
}
// normal rendering
uj5u.com熱心網友回復：
看起來您的 ArrayA 也在發生變化，所以也許在您的情況下也將 ArrayA 包含在 useEffect 中？
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/410857.html
標籤：