React Query未调用API致data返回undefined，求技术排查

问题核心原因及修复步骤： #

1. 违反React Hooks规则，导致useQuery未执行

React Query的useQuery是React钩子，必须直接在React组件或自定义钩子中调用。你的fetchAllTasks是普通函数，不是自定义钩子（自定义钩子命名必须以use开头），调用它时不符合钩子规则，导致useQuery完全没触发，自然不会发起网络请求。

修复：将函数改为自定义钩子
修改task-api.ts：

import { useQuery } from "@tanstack/react-query"
import axios from "axios"
import { Task } from "../types"

// 自定义钩子必须以use开头命名
export const useFetchAllTasks = () => {
    return useQuery({
        queryKey: ['tasks'],
        queryFn: async () => {
            const response = await axios.get('http://localhost:3100/tasks')
            // 修复axios数据获取方式（见下文）
            const data: unknown = response.data
            
            console.log('data: ', data)
            return data as Task[]
        }
    })
}

在task-list.tsx中调用这个钩子：

// 替换原fetchAllTasks的导入
import { useFetchAllTasks } from "../../api/tasks-api"

const TaskList = () => {
    // 调用自定义钩子
    const { data: tasks, isLoading } = useFetchAllTasks()

    console.log('tasklists - fetchAllTasks:', tasks) 

    // 其余渲染代码不变
}

2. axios响应数据获取错误

axios请求返回的response.data是同步属性，不是异步方法，你写的await response.data()会直接抛出错误（因为data不是函数）。改成直接读取属性即可：

// 错误写法
const data: unknown = await response.data()
// 正确写法
const data: unknown = response.data

3. 可选优化：渲染逻辑更清晰

当前的条件判断可以调整，优先处理加载状态，避免逻辑混乱：

return (
    <div className={`${style['TaskList']}`}>
        <ul>
            {isLoading ? (
                <p>加载中...</p>
            ) : tasks?.length === 0 ? (
                <p className={`${style['no-task']}`}>+++ Task List is Empty +++</p>
            ) : (
                tasks?.map((task) =>
                    <TaskItem
                        key={task.id} {/* 建议用task的唯一id作为key，避免toString重复 */}
                        atom={task}
                    />
                )
            )}
        </ul>
    </div>
)

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