开发者问题收集

读取 Json 响应时出现问题。“无法读取未定义的属性(读取‘值’)”[重复]

2024-01-15
781

嗨,我正在使用 reactJs 中的 FETCH 函数从 Json 服务获取数据。当我获得数组时,将答案保存在变量中:

const resp = await fetch(url);   
      const { contenidos = [] } = await resp.json();

Json 是(有 500 个项目):

[
    {
        "custom_fields": {
            "v2_titulo": {
                "id": 1561385,
                "value": "Algun titulo acá"
            },
            "v2_extracto": {
                "id": 1561386,
                "value": "extracto de la noticia acá"
            },
            "v2_descripcion": {
                "id": 1561387,
                "value": "descripción de la noticia acá"
            },
            "v2_vigencia": {
                "id": 1561388,
                "value": "Vigencia"
            }            
        },
        "id": 12388,
        "uuid": "7fb8560c-7a18-481f-abfa-a0e331255f81",
        "created_at": "2023-07-21T09:33:32.000-04:00",
        "updated_at": "2023-07-21T09:33:32.000-04:00",
        "published_at": "2024-01-15T10:13:33.000-03:00",
        "covers": [
            "https://noticias/covernoticia.jpg",
            "https://noticias/logonoticia.jpg"
        ],
        "tags": [
            "actualidad",
            "providencia",
            "santiago"
        ],
        "category": "salud",
        "site_id": 1,
        "video_url": ""
    },
    {
        "custom_fields": {
            "v2_titulo": {
                "id": 1561385,
                "value": "Algun titulo acá 2"
            },
            "v2_extracto": {
                "id": 1561386,
                "value": "extracto de la noticia acá 2"
            },
            "v2_descripcion": {
                "id": 1561387,
                "value": "descripción de la noticia acá 2"
            },
            "v2_vigencia": {
                "id": 1561388,
                "value": "Vigencia 2"
            }            
        },
        "id": 12388,
        "uuid": "7fb8560c-7a18-481f-abfa-a0e331255f81",
        "created_at": "2023-07-21T09:33:32.000-04:00",
        "updated_at": "2023-07-21T09:33:32.000-04:00",
        "published_at": "2024-01-15T10:13:33.000-03:00",
        "covers": [
            "https://noticias/covernoticia.jpg",
            "https://noticias/logonoticia.jpg"
        ],
        "tags": [
            "actualidad",
            "huechuraba",
            "santiago"
        ],
        "category": "salud",
        "site_id": 1,
        "video_url": ""
    }
   
]

我正在像这样映射:

const noticias =  contenidos.map( item => ({
        id: item.id,
        banner: item.covers[0],
        logo: item.covers[1],
        title: item.custom_fields.v2_titulo.value,
        category: item.category,
       
      }));

它适用于 id、covers 和 category,但是当我尝试输入“v2_titulo.value”时,它不起作用并抛出:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value')
at getBCHNews.js?t=1705328829877:17:45
at Array.map ()
at getBCHNews (getBCHNews.js?t=1705328829877:12:36)
at async getNews (useFetchNews.js?t=1705328829877:10:29)

你能帮帮我吗!

我需要阅读 v2_titulo.Value

2个回答

也许在响应中,部分结果中没有“v2_titulo”。因此,当您尝试访问“v2_titulo”(未定义)时,您会收到错误。在这种情况下,您可以在访问“v2_titulo”值时使用“可选链接(?)”。如果“v2_titulo”以某种方式缺失或(未定义),它将忽略它。

const noticias =  contenidos.map( item => ({
        id: item.id,
        banner: item.covers[0],
        logo: item.covers[1],
        title: item.custom_fields.v2_titulo?.value,
        category: item.category,
       
      }));
rahidt
2024-01-16

嗯,您的代码对我来说没有问题。我假设它类似于 Davi 所说的,即某些标题为 null 或缺失。另一种方法是,您可以编写映射以设置标题,以指示在 v2_titulo 遇到 nullundefined 值时未找到标题,如下所示:

const noticias =  contenidos.map( item => ({
    id: item.id,
    banner: item.covers[0],
    logo: item.covers[1],
    title: item.custom_fields.v2_titulo.value ? item.custom_fields.v2_titulo.value : "No title found" // or some other value that makes sense to you like `null`,
    category: item.category,
  }));
switchblade_comb
2024-01-15