时间戳

首页 > 解决方案 > 反应错误：TypeError：无法读取未定义的属性“缩略图”

javascript - 反应错误：TypeError：无法读取未定义的属性“缩略图”

问题描述

我遇到了一个奇怪的问题。我是 React 新手，我只想从 The Guardian API 检索标题和缩略图。

当我尝试设置图像的 src 时data.fields.thumbnail出现错误Error: TypeError: Cannot read property 'thumbnail' of undefined

奇怪的是，我在错误消息出现之前看到图像在屏幕上正确加载，这让我认为缩略图实际上是定义的？

这是我的代码：

import React, { useState, useEffect } from 'react'
import axios from 'axios'

function NewsData() {

    const [data, setData] = useState([])
    const urlApi = "https://content.guardianapis.com/search?order-by=relevance&use-date=published&q=crypto&api-key=fbd25144-951c-40ac-8dfa-63fdd9a1eb06&show-fields=thumbnail"

    useEffect(() => {
        axios.get(urlApi)
            .then(response => setData(response.data.response.results['0']))
    }, [urlApi])


    return (
        <div>
            <h4>{data.webTitle}</h4>
            {/* <p>{data.fields.thumbnail}</p> */}
            <img src={data.fields.thumbnail}></img>
        </div>
    )
}

export default NewsData

标签： javascriptreactjs

解决方案

您正在尝试在加载之前使用 data.fileds.thumbnail。这就是它未定义的原因。

您可以进行验证，如果数据存在，则显示这部分代码。

推荐阅读