如何多次使用isSuccess判断数据是否返回？获取各Hook的isSuccess值

要分别获取每个Hook对应的isSuccess值并判断数据状态，核心是让每个Hook的状态独立，在组件中通过变量重命名区分不同的isSuccess，具体实现如下：

1. 确保每个Hook返回独立的状态 #

不管是自己封装的Hook还是使用第三方库（比如React Query的useQuery），每个Hook实例都会维护自己的状态（包括isSuccess），不会互相干扰。

比如封装三个独立的数据请求Hook：

// 封装用户数据Hook
const useUser = () => {
  const { isSuccess, data: userInfo } = useQuery({
    queryKey: ['user'],
    queryFn: () => fetch('/api/user').then(res => res.json())
  });
  return { isSuccess, userInfo };
};

// 封装商品数据Hook
const useProducts = () => {
  const { isSuccess, data: productList } = useQuery({
    queryKey: ['products'],
    queryFn: () => fetch('/api/products').then(res => res.json())
  });
  return { isSuccess, productList };
};

// 封装订单数据Hook
const useOrders = () => {
  const { isSuccess, data: orderList } = useQuery({
    queryKey: ['orders'],
    queryFn: () => fetch('/api/orders').then(res => res.json())
  });
  return { isSuccess, orderList };
};

2. 在组件中区分每个Hook的isSuccess #

在组件中使用时，通过解构赋值的重命名语法，给每个isSuccess赋予唯一的变量名，避免冲突：

const DataPage = () => {
  // 重命名每个Hook的isSuccess，明确对应的数据类型
  const { isSuccess: isUserLoaded, userInfo } = useUser();
  const { isSuccess: isProductsLoaded, productList } = useProducts();
  const { isSuccess: isOrdersLoaded, orderList } = useOrders();

  // 单独判断单个数据是否加载完成
  if (isUserLoaded) {
    console.log('用户数据已返回:', userInfo);
  }

  // 判断所有数据是否都加载完成
  const allDataReady = isUserLoaded && isProductsLoaded && isOrdersLoaded;

  return (
    <div className="data-container">
      <section>
        {isUserLoaded ? (
          <div>用户名：{userInfo.name}</div>
        ) : (
          <div>用户数据加载中...</div>
        )}
      </section>
      <section>
        {isProductsLoaded ? (
          <ul>
            {productList.map(item => <li key={item.id}>{item.name}</li>)}
          </ul>
        ) : (
          <div>商品数据加载中...</div>
        )}
      </section>
    </div>
  );
};

关键要点 #

• 每个Hook的isSuccess是独立状态，由各自的请求逻辑维护，不会互相影响。
• 必须通过重命名区分变量名，避免同名变量覆盖。
• 可以单独处理单个数据加载完成的逻辑，也可以组合多个isSuccess判断全局加载状态。

内容的提问来源于stack exchange，提问作者Muhammad Faiz Siddiqui