自定义异步Hook无法返回预期数据库数据的问题咨询

你的代码存在几个核心问题，导致调用Hook时只能拿到空数组：

• 自定义Hook不能是async函数：React的Hook规则要求Hook必须同步执行，否则React无法正确追踪Hook的调用顺序，直接定义async Hook本身就不符合规范。
• 异步请求的时机不对：直接在Hook函数体里调用异步请求，每次组件渲染都会重复触发，而且useState的更新是异步的，第一次渲染时allProperties还是初始的空数组，此时返回自然拿不到异步加载的数据。

修正后的Hook代码 #

import { useState, useEffect } from 'react';
import { ref, get } from 'firebase/database'; // 适配你使用的数据库库

const useGetAllProperties = () => {
  const [allProperties, setAllProperties] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 把异步请求逻辑封装在useEffect内部的函数里
    const fetchProperties = async () => {
      try {
        const propertyRef = ref(database, "properties");
        const snapshot = await get(propertyRef);
        const properties = snapshot.val();
        // 处理数据库返回的数据，转成数组格式
        setAllProperties(properties ? Object.values(properties) : []);
      } catch (err) {
        // 捕获请求错误，方便组件处理异常
        setError(err.message);
      } finally {
        // 请求完成后标记加载结束
        setIsLoading(false);
      }
    };

    fetchProperties();
  }, []); // 空依赖数组：只在组件挂载时执行一次请求

  // 返回数据、加载状态、错误信息，让调用方可以灵活处理
  return { allProperties, isLoading, error };
};

组件中如何使用这个Hook #

const PropertyList = () => {
  const { allProperties, isLoading, error } = useGetAllProperties();

  // 加载中状态
  if (isLoading) {
    return <div>正在加载房源数据...</div>;
  }

  // 错误状态
  if (error) {
    return <div>加载失败：{error}</div>;
  }

  // 数据渲染
  return (
    <ul>
      {allProperties.map((property) => (
        <li key={property.id}>{property.title}</li>
      ))}
    </ul>
  );
};

关键修正点说明 #

1. 用useEffect包裹异步请求：确保请求只在组件挂载时触发一次（如果需要依赖某个变量重新请求，把变量加入useEffect的依赖数组即可）。
2. 新增isLoading和error状态：让组件能清晰处理不同阶段的UI展示，避免用户看到空白或者无提示的错误。
3. 移除Hook的async标记：遵守React Hook的规则，保证Hook能被正确执行和追踪。

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