React Query数据在useMemo中返回undefined问题求助

你的问题核心在于useMemo的依赖数组不完整，导致数据加载完成后useMemo没有重新计算结果。

问题分析 #

1. 组件初始渲染时，isLoading为true，useMemo内的条件不满足，直接返回undefined，所以第一次console.log会输出undefined。
2. 数据加载完成后，isLoading变为false，status切换为success，category也拿到了实际数据，但你的useMemo只监听了isLoading——如果category或status的变化没被纳入依赖，useMemo不会重新执行，result就会停留在之前的undefined。
3. 另外，你已经有isSuccess状态，完全可以用它替代!isLoading && status === 'success'，逻辑更简洁。

修正后的代码 #

const result = React.useMemo(() => {
  if (isSuccess) {
    return category?.data // 用可选链避免category未加载时的报错
  }
}, [isSuccess, category]) // 加入回调中用到的所有外部变量作为依赖

console.log(result)

额外说明 #

• 必须把useMemo回调里用到的所有外部变量都加入依赖数组，React才会在这些变量变化时重新计算useMemo的结果。
• 初始渲染时result仍会是undefined，这是正常现象——数据加载需要时间，你可以在组件内根据isLoading或isSuccess做条件渲染，比如加载时显示loading状态，成功后再渲染result相关内容。

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