Tengo una matriz y un mapa que se obtienen de dos consultas RTK diferentes. La matriz A contiene metadatos (Id) utilizados para acceder a los valores en el mapa B. Por lo tanto, su actualidad debe sincronizarse para que cada valor en B tenga alguna identificación en la matriz A.
Obtengo ambos datos del servidor, pero luego aplico algunos filtros al mapa B de modo que la cantidad de valores se reduzca potencialmente. Esto se hace así:
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.El problema al que me enfrento es que, si bien puedo escuchar los resultados de la consulta tanto para arrayA como para mapB para asegurarme de que ambos estén disponibles (a través de datos, isLoading, isFetching, etc.), no estoy seguro de cómo asegurarme de que el proceso de filtrado en useEffect ha ocurrido antes de usar arrayA para acceder a filteredMapB. Actualmente, el problema ocurre porque utilizo la versión disponible más reciente de arrayA para acceder a filteredMapB (que no siempre es la más reciente, ya que el filtrado lleva tiempo), por lo que arrayA termina conteniendo elementos que no están en filteredMapB.
¿Cómo puedo sincronizar estos? Idealmente, la solución se prestaría bien a una expresión booleana que podría usar para representar condicionalmente la lista o un control giratorio de carga.
Pensé en poner ambas matrices en variables de estado locales y usar useCallback para crear captadores para las dos matrices que devolverían valores sincronizados usando la matriz de dependencia, pero preferiría una solución diferente.
No usaría useEffect en absoluto aquí. Esto es algo en lo que useMemo resulta mucho más útil, ya que sucede de forma sincrónica y nunca tendrá un procesamiento intermedio.
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 renderingparece que su ArrayA también está cambiando, así que tal vez incluya ArrayA en useEffect también en su caso.