Javascript 无法读取属性'；材料'；未定义的。使用嵌套对象对useState作出反应

我正在尝试将此API调用的结果存储到我的状态中。当我试图在JSX中调用任何对象的“数据”状态时，例如：data[“Rank A:Real Time Performance”]。Materials，我会得到未定义的错误。如果状态变量不是嵌套对象，则可以正常工作。有人能给我指一下正确的方向吗？我做错了什么，还是这是一种坏习惯？谢谢

这是API响应的一个示例

{
"Meta Data": {
    "Information": "US Sector Performance (realtime & historical)",
    "Last Refreshed": "04:20 PM ET 09/13/2019"
},
"Rank A: Real-Time Performance": {
    "Materials": "1.14%",
    "Financials": "0.84%",
    "Energy": "0.80%",
    "Industrials": "0.52%",
    "Communication Services": "-0.05%",
    "Health Care": "-0.07%",
    "Consumer Discretionary": "-0.19%",
    "Utilities": "-0.57%",
    "Information Technology": "-0.67%",
    "Consumer Staples": "-0.75%",
    "Real Estate": "-1.27%"
},

以下是反应代码：

从'react'导入{useState，useffect}；
常量扇区数据=（）=>{
let[data，setData]=useState（{}）；
异步函数fetchData（）{
试一试{
常量url=”https://www.alphavantage.co/query?function=SECTOR&apikey=VZI9OTBHE0X9Y1JD";
const response=等待获取（url）；
const json=await response.json（）；
//这个控制台日志打印得很好
console.log（“json=“+json[“排名A:实时性能”].Materials）
setData（json）
}捕获（e）{
控制台错误（e）；
}
};
useffect（（）=>{
fetchData（）；
}, [])
返回(
{数据[“排名A：实时性能”]。材料}
)
}
导出默认扇区数据

最初

数据

为空对象。您将获得未定义的

，因为您试图访问该空对象的不存在属性。因此，添加一个条件，检查您是否没有数据（或没有键的对象）。例如：

if (!Object.keys(data).length) return <div>No data</div>;

return (
  <>
    {data["Rank A: Real-Time Performance"].Materials}
  </>  
)

如果（！Object.keys（data.length）不返回任何数据；
返回(
{数据[“排名A：实时性能”]。材料}
)

最初

数据

是一个空对象。您将获得未定义的

，因为您试图访问该空对象的不存在属性。因此，添加一个条件，检查您是否没有数据（或没有键的对象）。例如：

if (!Object.keys(data).length) return <div>No data</div>;

return (
  <>
    {data["Rank A: Real-Time Performance"].Materials}
  </>  
)

如果（！Object.keys（data.length）不返回任何数据；
返回(
{数据[“排名A：实时性能”]。材料}
)