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%"
},
这是反应代码:
import {useState, useEffect} from 'react';
const SectorData = () => {
let [data, setData] = useState({});
async function fetchData() {
try {
const url = "https://www.alphavantage.co/query?function=SECTOR&apikey=VZI9OTBHE0X9Y1JD";
const response = await fetch(url);
const json = await response.json();
// This console log prints perfectly
console.log("json = " + json["Rank A: Real-Time Performance"].Materials)
setData(json)
} catch (e) {
console.error(e);
}
};
useEffect(() => {
fetchData();
}, [])
return(
<>
{data["Rank A: Real-Time Performance"].Materials}
</>
)
}
export default SectorData
我通过使用 next.js getInitialProps 函数找到了解决方法。
但是我将如何只使用 React 来实现这样的 onload api 调用呢?
解决方案
最初data
是一个空对象。你得到undefined
是因为你试图访问那个空对象不存在的属性。因此,添加一个条件来检查您是否没有数据(或没有键的对象)。例如:
if (!Object.keys(data).length) return <div>No data</div>;
return (
<>
{data["Rank A: Real-Time Performance"].Materials}
</>
)