RTK Query调用偶尔返回undefined，读取projects属性报错求助

问题根源 #

RTK Query的useGetSomeProjectsQuery发起请求后，会经历加载中、请求成功、请求失败等状态。在请求完成前，返回对象里的data是undefined，直接访问data.projects就会触发Cannot read properties of undefined (reading 'projects')错误。

你尝试的async/await和setTimeout都不适用：

• React自定义Hook不能是异步函数，会破坏Hook的执行规则
• setTimeout是不可靠的时序控制方式，无法精准匹配请求完成时机

正确解决方案 #

利用RTK Query返回的状态标识（isLoading、isSuccess、isError）安全处理数据，同时通过可选链或条件判断避免直接访问undefined属性：

import { useState, useEffect } from "react";
import { useGetSomeProjectsQuery } from "./projectsApi";

export default function useProjects() {
  const [page, setPage] = useState(1);
  const [title, setTitle] = useState("");
  const [languages, setLanguages] = useState("");
  const [withDetails, setWithDetails] = useState([]);
  
  // 解构RTK Query返回的状态和数据
  const { data: projectsData, isSuccess, isLoading } = useGetSomeProjectsQuery(page, languages, title);

  useEffect(() => {
    // 只有请求成功且数据存在时，才处理数据
    if (isSuccess && projectsData?.projects) {
      setWithDetails(
        projectsData.projects.map((project) => ({
          ...project,
          details: false
        }))
      );
    }
  }, [isSuccess, projectsData]);

  // 返回加载状态给调用组件，方便做加载提示
  return { withDetails, isLoading };
}

关键修改点 #

• 解构状态：直接从Hook返回值中解构data、isSuccess等状态，代码更清晰
• 安全访问数据：用projectsData?.projects可选链操作符，避免projectsData为undefined时报错
• 条件触发副作用：在useEffect中仅当请求成功且数据存在时更新withDetails，避免未完成请求时执行map
• 返回加载状态：把isLoading返回给组件，方便显示加载提示

关于isSuccess判断后数据不显示的排查点 #

• 确认API返回的projectsData.projects是数组类型，结构符合预期
• 检查useEffect的依赖数组是否包含projectsData和isSuccess，确保状态变化时能触发更新
• 在调用该Hook的组件中，通过isLoading判断，加载时显示提示，成功后再渲染数据

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