React-Typescript组件无法渲染且useQuery返回数据undefined问题求助

我来帮你排查并解决这些问题，主要有几个核心问题需要修正：

1. 接口数据与类型定义不匹配 #

你调用的 https://jsonplaceholder.typicode.com/todos/1 返回的是单个待办对象，但你的类型定义 Props['item'] 是数组类型，同时 getTodos 返回的单个对象也和你期望的数组类型不兼容，这直接导致了 data.map 报错，也是组件无法渲染的关键原因。

修正方向： #

• 先定义正确的单个Todo类型，再按需定义数组类型：

// 单个待办项的类型（接口返回的completed是布尔值，不是字符串）
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

// 待办列表数组类型
type TodoList = Todo[];

• 如果需要渲染列表，应该调用列表接口 https://jsonplaceholder.typicode.com/todos（去掉末尾的/1），这样返回的才是数组；如果就是要渲染单个todo，那不能用map，直接渲染单个对象的属性即可。

2. 处理React Query的data可能为undefined的情况 #

React Query在请求未完成、请求失败时，data 会是 undefined，直接调用 data.map 会抛出错误，导致组件崩溃无法渲染。你需要：

• 添加加载状态判断
• 处理错误状态
• 兜底data为undefined的情况

修正后的List组件（以获取待办列表为例）： #

import React from 'react';
import { useQuery } from 'react-query';

// 定义单个待办项类型
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

// 获取待办列表的异步函数（返回数组）
const getTodos = async (): Promise<Todo[]> => {
  const request = await fetch('https://jsonplaceholder.typicode.com/todos');
  // 处理请求错误
  if (!request.ok) {
    throw new Error('加载待办列表失败');
  }
  return request.json();
};

// 组件不需要接收冗余的Props，数据来自React Query
const List: React.FC = () => {
  const { data, isLoading, error } = useQuery<Todo[]>('todos', getTodos);

  // 加载中状态
  if (isLoading) {
    return <div>正在加载待办事项...</div>;
  }

  // 请求错误状态
  if (error) {
    return <div>出错了：{(error as Error).message}</div>;
  }

  // 数据为空的兜底
  if (!data || data.length === 0) {
    return <div>暂无待办事项</div>;
  }

  // 渲染列表
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}> {/* 必须添加唯一key，避免React警告 */}
          <h2>{item.title}</h2>
          <h3>{item.completed ? '✅ 已完成' : '🔘 未完成'}</h3>
        </div>
      ))}
    </div>
  );
};

export default List;

3. 其他冗余/错误点修正 #

• List组件的Props定义了item，但组件并没有接收使用这个props，属于冗余代码，直接删除即可。
• 之前的fetch输出undefined，大概率是因为请求还没完成就打印了data，或者数据类型不匹配导致解析异常，修正接口和类型后就能正常获取数据。

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