javascript - TypeError：无法读取未定义的属性“数据”-无法在 Reactjs 中访问超出特定级别的对象“道具”

问题描述

我正在通过axiosinReact使用UseEffect.
我们将响应设置为一个名为datausinguseState

const [data, setData] = useState({});
  setData(response);

响应来自 NASA API，我们只得到了这个调用返回的一个对象（粘贴在下面）。

由于我将响应命名为“数据”并且它也有一个“数据”键，所以如果我想记录 url，我知道我会输入console.log(data.data.url)并且在我的app.js主要功能中运行顺利。在我的card.js组件中，我可以成功登录console.log(data)，console.log(data.data)并且它给出了您所期望的，但是当我console.log(data.data.url)或(data.data.title)它由于某种原因变成时undefined，这会导致 JSX 的返回函数出现大错误并且网站不会加载：

 TypeError: Cannot read property 'data' of undefined error.

我不认为我的命名有任何问题，因为它在对象的更高级别上运行良好，例如console.log(data.data)作品，我在我眼前看到列出的下一级属性。

我实际上是控制台。记录这个：

{console.log('FROM INSIDE THE RETURN')}
{console.log(props.data)}  // works, displays object {}
{console.log(props.data.data)}  //works, displays object one level lower   
{console.log(props.data.data.url)}  // type error. You name the property.

不用说这不起作用，这是我完成任务的第一种方法：

<img src={props.data.data.url}/>

也就是说，我们在团队负责人的帮助下通过削减上游对象的顶层来使程序正常工作，如下所示：

SetData(response.data)

// as opposed to 
SetData(response)

// and then using 
<img src={props.data.url}/>

所以我们不必深入到 props 的底部，但为了清楚起见，我想知道它为什么以及它对编译器有什么影响，特别是当它可以正常工作到 n-1 层时，其中 n 是数字对象的层数。

我什至更改了其中一个数据变量的名称，这样“数据”就不会重复，并且行为是相同的。

感谢您的帮助和见解！我非常感谢您可以分享的任何见解以及对我的问题的反馈。

这是我正在使用的对象。

     {
        data: {
            copyright: "Bryan Goff",
            date: "2020-03-18",
            explanation: "What's happening behind...[truncated]...Florida, USA.",
            hdurl: "https://apod.nasa.gov/apod/image/2003/AntiCrepRays_Goff_3072.jpg",
            media_type: "image",
            service_version: "v1",
            title: "Anticrepuscular Rays over Florida",
            url: "https://apod.nasa.gov/apod/image/2003/AntiCrepRays_Goff_960.jpg"
        },
        status: 200,
        statusText: "OK",
        headers: {
            contenttype: "application/json"
        },
        config: {
            url: "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY",
            method: "get",
            headers: {
                Accept: "application/json, text/plain, */*"
            },
            transformRequest: [
                null
            ],
            transformResponse: [
                null
            ],
            timeout: 0,
            xsrfCookieName: "XSRF-TOKEN",
            xsrfHeaderName: "X-XSRF-TOKEN",
            maxContentLength: -1
        },
        request: {}
    }

标签： javascriptreactjsreact-props

import React from 'react'; const Component = () => { const [isLoading,setIsLoading] = useState(true) const [data, setData] = useState({}); useEffect(()=>{ setTimeout(()=>fetch('https://jsonplaceholder.typicode.com/users/1') .then(response => response.json()) .then(json => { setData(json) setIsLoading(false) }),1000) },[0]) return( isLoading ? 'Loading...' : <div> <h1>Hello {data.name}!</h1> <p>Your username is {data.username}</p> </div> ) } export default Component

javascript - TypeError：无法读取未定义的属性“数据”-无法在 Reactjs 中访问超出特定级别的对象“道具”

问题描述

解决方案

推荐阅读