Javascript 反应错误：TypeError:无法读取属性'；缩略图'；未定义的

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

当我尝试将图像的src设置为

data.fields.thumboil

时，我得到了错误

error:TypeError:无法读取未定义的属性“thumboil”

奇怪的是，就在错误消息出现之前，我在屏幕上看到了正确加载的图像，这让我觉得缩略图实际上已经定义好了

这是我的密码：

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

import React，{useState，useffect}来自“React”
从“axios”导入axios
函数NewsData（）{
const[data，setData]=useState（[]）
常量urlApi=”https://content.guardianapis.com/search?order-by=相关性和使用日期=发布&q=加密和api密钥=fbd25144-951c-40ac-8dfa-63fdd9a1eb06&显示字段=缩略图“
useffect（（）=>{
获取（urlApi）
.then（response=>setData（response.data.response.results['0']））
}，[urlApi]）
返回(
{data.webTitle}
{/*{data.fields.thumbnail}
*/}
)
}
导出默认新闻数据

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

---

如果数据存在，您可以进行验证，然后显示这段代码。

首先给出建议。您必须查看API返回的数据

然后您将知道如何访问您的数据

现在您正在访问它，就像这样

response.data.response.response['0']

，实际上您的response有一个具有这样路径的nos对象

例如，如果您想访问元素的id，可以按如下方式访问：

response.results[0].id

注意您的API没有返回任何src路径。换句话说，无法定义“缩略图”

编辑：

因为你在评论中告诉我，你检查了数据，这是正确的方法

为了顺利获取数据，请使用条件

例如：

{
    data ? 
    <img src={data.fields.thumbnail}></img> : null
}

{
数据？
：null
}

为什么要绑定urlApi const，因为它不会改变useEffect的数组？很好！正在学习几本教程，一定是忽略了它。不管怎样，我不认为这是问题的原因。我也不认为，尝试记录你的响应，而不是设置你的状态数据。是的，我这样做了，当我记录它时，它会工作。一旦我把{date.fields.thumbnail}放在返回上，它就会给出错误。我觉得我快发疯了。。其实我不知道它怎么能工作。我从代码中得到的url中检查了api响应，该url没有

缩略图

元素。无论如何，如果它工作得很好，你可以尝试使用一个条件来渲染你的img