Estoy tratando de ejecutar una consulta cuando se actualiza una matriz, ¡pero la consulta se ejecuta de inmediato!

Así que verifiqué la matriz Productos. checkedProducts algunos datos cuando se montó la pantalla, por lo que mi objetivo es ejecutar la consulta cuando esta matriz tenga datos.

aquí está el gancho

 import {useQuery} from 'react-query'; import {checkAvailableProducts} from '../Api'; export type checkProductItem = { product_id: number; detail_id: number; }; export interface checkProducts { products: checkProductItem[]; } export const useCheckAvailableProducts = (products?: checkProducts) => { console.log('products-RQ', products); return useQuery( ['checkAvailableProducts'], () => checkAvailableProducts(products), { enabled: !!products?.products, // OR products?.products.length > 0 not works }, ); };

componente

 .... const [checkedProducts, setCheckedProducts] = useState<checkProducts>(); const {data: unavailableProducts, refetch} = useCheckAvailableProducts( checkedProducts, ); React.useEffect(() => { if (cartProducts.length) { let productsIDs = cartProducts.map(prod => { return { product_id: prod.id, detail_id: prod.detail_id, }; }); Promise.all(productsIDs).then(allProductsIDs => { console.log('allProductsIDs', allProductsIDs); return setCheckedProducts({ products: allProductsIDs, }); }); } }, [cartProducts]); React.useEffect(() => { const unsubscribe = navigation.addListener('focus', () => { refetch(); console.log('unavailableProducts:', unavailableProducts); if (unavailableProducts && unavailableProducts.length > 0) { console.log('hey if0update!!!'); updateCart(unavailableProducts); } }); // Return the function to unsubscribe from the event so it gets removed on unmount return unsubscribe; }, [navigation, refetch, unavailableProducts, updateCart]);