React Query如何实现仅当数组推入数据后才执行查询？

• React Query 提供的refetch方法会强制跳过enabled配置的限制，只要调用就会触发查询，不受启用状态约束。你在页面focus监听事件中直接调用refetch，如果此时checkedProducts还未完成赋值，就会触发无有效参数的查询。
• 查询key配置为固定值['checkAvailableProducts']，未关联查询参数products，后续products更新后无法自动触发对应新参数的查询。
• 原有enabled判断仅校验products?.products是否存在，未校验数组长度，空数组也会满足触发条件。
• 组件中对普通对象数组使用Promise.all属于冗余逻辑，无实际作用还拉长了状态更新的异步时序，提高了状态未就绪时触发查询的概率。

调整自定义Hook配置 #

修改查询key和enabled规则，确保只有存在有效参数时才允许查询：

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', products], // 将参数加入查询key，参数变化自动触发新查询
    () => checkAvailableProducts(products),
    {
      // 仅当products存在且数组有值时才允许自动查询
      enabled: !!products?.products && products.products.length > 0,
    },
  );
};

调整组件逻辑 #

移除冗余异步逻辑，同时在调用refetch前增加参数合法性校验：

// ...其他代码
const [checkedProducts, setCheckedProducts] = useState<checkProducts>();
const {data: unavailableProducts, refetch} = useCheckAvailableProducts(
  checkedProducts,
);


React.useEffect(() => {
  if (cartProducts.length) {
    const productsIDs = cartProducts.map(prod => {
      return {
        product_id: prod.id,
        detail_id: prod.detail_id,
      };
    });
    // 移除冗余的Promise.all，直接赋值
    setCheckedProducts({
      products: productsIDs,
    });
  }
}, [cartProducts]);

React.useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    // 调用refetch前先校验参数是否有效
    if (checkedProducts?.products?.length) {
      refetch();
    }
    console.log('unavailableProducts:', unavailableProducts);
    if (unavailableProducts && unavailableProducts.length > 0) {
      console.log('hey if0update!!!');
      updateCart(unavailableProducts);
    }
  });
  return unsubscribe;
}, [navigation, refetch, unavailableProducts, updateCart, checkedProducts]);

内容的提问来源于stack exchange，提问作者Oliver D