React Query useQuery点击返回undefined，二次点击才正常求助

问题原因 #

这是两个异步机制叠加导致的：

1. React的useState更新是异步的，调用setUserId后，组件不会立刻重新渲染，此时userId还是旧值，user也还是之前的状态。
2. useQuery依赖queryKey（[QUERY.USERS, userId]）触发请求，当userId更新后，请求需要时间完成，第一次点击时请求处于pending状态，user自然是undefined；第二次点击时，要么之前的请求已经完成，要么React Query命中了缓存，所以能拿到数据。

解决方法 #

1. 利用React Query的状态控制UI逻辑

修改自定义Hook，返回请求状态，在组件渲染阶段处理数据，而非点击事件中直接访问：

const useUsers = (userId: number) => {
    const { data: user, isLoading, isError } = useQuery(
        [QUERY.USERS, userId],  
        () => getUser(userId),
        { enabled: !!userId } // 仅当userId有效时发起请求，避免初始null时的无效请求
    )
    
    return {
        user,
        isLoading,
        isError
    }
}

主组件中：

const [userId, setUserId] = useState<number | null>(null)  
const { user, isLoading, isError } = useUsers(userId);

const handleUserDetails = (userId: number) => {
    setUserId(userId);
}

// 渲染时根据状态处理
if (isLoading) return <div>加载用户数据中...</div>;
if (isError) return <div>加载用户数据失败</div>;

2. 使用useQuery的onSuccess回调处理请求完成后的逻辑

如果需要在用户数据加载完成后执行特定操作，直接在useQuery中配置成功回调：

const useUsers = (userId: number, onSuccess?: (user: any) => void) => {
    const { data: user } = useQuery(
        [QUERY.USERS, userId],  
        () => getUser(userId),
        { 
            enabled: !!userId,
            onSuccess
        }
    )
    
    return { user }
}

主组件中：

const handleUserDetails = (userId: number) => {
    setUserId(userId);
}

const { user } = useUsers(userId, (userData) => {
    // 请求成功后触发，这里能拿到最新的用户数据
    console.log(userData);
});

3. 用useEffect监听user的变化

如果必须在数据更新后执行逻辑，通过useEffect监听user状态：

const [userId, setUserId] = useState<number | null>(null)  
const { user } = useUsers(userId);

useEffect(() => {
    if (user) {
        // user有值时执行操作
        console.log(user);
    }
}, [user]);

const handleUserDetails = (userId: number) => {
    setUserId(userId);
}

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