React useState状态未更新：从数据库获取的数据无法存入state

核心问题点 #

• Hook使用违规：useState是React Hook，只能在React组件或自定义Hook（命名需以use开头）内部调用，不能在普通函数getAllProperties中直接使用。
• 异步状态更新逻辑错误：
  • setAllProperties([property])每次都会将状态重置为仅包含当前遍历的单个property，无法累加所有数据项。
  • console.log(allProperties)在异步请求完成前执行，此时状态还未更新，所以打印结果为空。
• 函数设计矛盾：该函数试图直接返回状态，但React状态更新是异步操作，普通函数无法直接返回异步获取的状态值。

修正方案 #

方案1：改为自定义Hook（推荐） #

如果需要在组件中复用数据获取逻辑，将其改造为自定义Hook：

const useAllProperties = () => {
  const [allProperties, setAllProperties] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchProperties = async () => {
      const propertyRef = ref(database, "properties");
      const snapshot = await get(propertyRef);
      const properties = snapshot.val();
      // 将数据库返回的对象转为数组，一次性更新状态
      const propertiesArray = Object.values(properties || {});
      setAllProperties(propertiesArray);
      setLoading(false);
    };

    fetchProperties();
  }, []);

  return { allProperties, loading };
};

在组件中使用：

function PropertyList() {
  const { allProperties, loading } = useAllProperties();

  if (loading) return <div>加载中...</div>;

  return (
    <div>
      {allProperties.map((property, index) => (
        <div key={index}>{/* 渲染property的具体内容 */}</div>
      ))}
    </div>
  );
}

方案2：普通异步函数（仅获取数据） #

如果只是需要获取数据而非维护组件状态，改为普通异步函数：

const getAllProperties = async () => {
  const propertyRef = ref(database, "properties");
  const snapshot = await get(propertyRef);
  const properties = snapshot.val();
  return Object.values(properties || {});
};

在组件中调用并维护状态：

function PropertyList() {
  const [allProperties, setAllProperties] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadProperties = async () => {
      const properties = await getAllProperties();
      setAllProperties(properties);
      setLoading(false);
    };

    loadProperties();
  }, []);

  // 后续渲染逻辑...
}

关键说明 #

• 状态更新要批量一次性设置，避免在循环中多次调用setState，防止不必要的组件重渲染和状态覆盖。
• React状态更新是异步的，调用setState后无法立刻获取最新状态值，需等待组件重渲染完成后（比如通过useEffect监听状态变化）才能看到更新结果。

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