interface UserData {
        id:number;
        question: string;
        updated_at: string;
        deleted_at: string;
        old_question_id: string;
        horizontal: number;
        type_id: number;
        solving_explanation:string;
        user_id:string;
        difficulty_level:string;
        explanation_image_id:string;
        type:any[]
            
    };

   

     const [question, setQuestion] = useState<UserData[]>([]);

API响应

"data": [
            {
                "id": 1,
                "question": "<p>1 sduhfsugn b</p>",
                "created_at": "2023-05-23T05:56:33.000000Z",
                "updated_at": "2023-05-23T05:56:33.000000Z",
                "deleted_at": null,
                "old_question_id": null,
                "horizontal": 0,
                "difficulty_level_id": null,
                "type_id": 1,
                "solving_explanation": "<p>rewsna enifederp si sihT</p>",
                "user_id": "3df2d014-36e6-4276-8ab6-eba8e2bedfd3",
                "difficulty_level": "1",
                "explanation_image_id": null,
                "type": {
                    "id": 1,
                    "name": "text box"
                },
                "options": [],
                "image": null,
                "option_images": [],
                "collections": [
                    {
                        "id": 1,
                        "cover": "<p>This is test&nbsp;</p>",
                        "created_at": "2023-05-23T11:25:00.000000Z",
                        "updated_at": "2023-05-23T11:25:00.000000Z",
                        "deleted_at": null,
                        "old_collection_id": null,
                        "explanation": "This is test cluster",
                        "file": null,
                        "difficulty_level_id": null,
                        "type_id": 5,
                        "head_title": "Test 1",
                        "user_id": "3df2d014-36e6-4276-8ab6-eba8e2bedfd3",
                        "difficulty_level": "2",
                        "pivot": {
                            "question_id": 1,
                            "collection_id": 1
                        }
                    }
                ]
            },

如何获取键值获取类型

{question.map((i) => (
  console.log(i.type.id)
))}

类型ID不匹配

推荐答案

您可以使用可选链接来获取值:

{question.map((i) => (
  console.log(i?.type?.id) // Accessing id with optional chaining
))}

{question.map((i) => (
  console.log(i.type && i.type.id)
))}

Optional chaining是类型脚本/Java脚本的一项功能,可以安全地访问对象属性,即使它们是嵌套的.

同样在上面的接口为什么你定义type:any[],因为你得到对象作为响应.将其更改为type:any

 type: {
    id: number;
    name: string;
  };

Typescript相关问答推荐

带有微前端的动态React路由问题

动态调用类型化函数

从typescript中的对象数组中获取对象的值作为类型'

接口重载方法顺序重要吗?

try 呈现应用程序获取-错误:动作必须是普通对象.使用自定义中间件进行MySQL操作

如何过滤文字中的类对象联合类型?

在类型脚本中将泛型字符串数组转换为字符串字母并集

判断映射类型内的键值的条件类型

基于泛型的条件接口键

类型推断对React.ForwardRef()的引用参数无效

TypeScrip:使用Union ToInterval辅助对象,但保留子表达式

当数组类型被扩展并提供标准数组时,TypeScrip不会抱怨

如何为特定参数定义子路由?

如何正确地将元组表格输入到对象数组实用函数(如ZIP)中,避免在TypeScrip 5.2.2中合并所有值

使用NextJS中间件重定向,特定页面除外

Typescript 是否可以区分泛型参数 void?

递归地排除/省略两种类型之间的公共属性

当并非所有歧视值都已知时,如何缩小受歧视联盟的范围?

使用 TypeScript 在 SolidJS 中绘制 D3 力图

使用 Next.js 路由重定向到原始 URL 不起作用