如何同步来自两个不同查询的数据，其中一个正在 useEffect 中转换？

Question

我有一个数组和地图是从两个不同的 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，这将 return 通过使用依赖数组来同步值，但我更喜欢不同的解决方案。

Answer 1

我根本不会在这里使用 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

Answer 2

看起来您的 ArrayA 也在发生变化，因此在您的情况下是否也可以在 useEffect 中包含 ArrayA？

如何同步来自两个不同查询的数据，其中一个正在 useEffect 中转换？

How can I synchronize data from two different queries, where one is being transformed in useEffect?

javascript

asynchronous

reactjs

redux

rtk-query