[英]Can't access api object properties - react Hooks
I've console.log'd the data being returned from my API and I get:我已经控制台记录了从我的 API 返回的数据,我得到:
fetchedData: {…}
confirmed: Object { value: 7650696, detail: "https://covid19.mathdro.id/api/confirmed" }
deaths: Object { value: 425869, detail: "https://covid19.mathdro.id/api/deaths" }
lastUpdate: "2020-06-13T04:33:11.000Z"
recovered: Object { value: 3630249, detail: "https://covid19.mathdro.id/api/recovered" }
<prototype>: Object { … }
<prototype>: Object { … }
Then, when I console.log(data.confirmed)
I receive undefined, even though it's listed right there.然后,当我
console.log(data.confirmed)
我收到 undefined,即使它就在那里列出。 I'm using hooks in my app, though I'm not sure that has anything to do with it because I'm able to console the data just fine.我在我的应用程序中使用了钩子,但我不确定这与它有什么关系,因为我能够很好地控制数据。 The problem is when I try to access the properties in data.
问题是当我尝试访问数据中的属性时。
https://codesandbox.io/s/wizardly-banzai-2n2xq?file=/src/App.js https://codesandbox.io/s/wizardly-banzai-2n2xq?file=/src/App.js
It should be它应该是
console.log(data.fetchedData && data.fetchedData.confirmed)
instead反而
console.log(data.confirmed)
Updated codesandbox
更新
codesandbox
EDIT:编辑:
Using destructuring assignment , it should be like this.使用解构赋值,应该是这样的。
let { fetchedData: {
confirmed
} = {
confirmed: 'defaullt value'
}
} = data;
setState
is asynchronous that's why data
is still an empty object when console.log
is executed. setState
是异步的,这就是为什么执行console.log
时data
仍然是空的 object 的原因。 Here is a quote from the React docs :这是来自React 文档的引用:
The setState function is used to update the state.
setState function 用于更新 state。 It accepts a new state value and enqueues a re-render of the component.
它接受新的 state 值并将组件的重新渲染排入队列。
The reason you can see the whole object when you console.log(data)
is that console.log
may not evaluate the object values until you click the expand arrow.您在
console.log(data)
时可以看到整个 object 的原因是,在您单击展开箭头之前, console.log
可能不会评估 object 值。
console.log
in different environments (browsers) may have different implementations.不同环境(浏览器)中的
console.log
可能有不同的实现。
If you want to see how data
looks like at the moment after setData({fetchedData});
如果你想看看
setData({fetchedData});
之后的data
是什么样子的is executed, you may log it this way:被执行,你可以这样记录:
console.log(JSON.parse(JSON.stringify(data)));
For more about the "mystery" of console.log
, please check console.log() async or sync?有关
console.log
的“奥秘”的更多信息,请查看console.log() 异步还是同步?
You really don't wanna destructure there.你真的不想在那里破坏。 But if you want, you can do something like this: https://codesandbox.io/s/peaceful-blackburn-ywdzu?file=/src/App.js:177-667
但如果你愿意,你可以这样做: https://codesandbox.io/s/peaceful-blackburn-ywdzu?file=/src/App.js:177-667
const [data, setData] = useState({});
const [recovered, setRecovered] = useState({});
const [confirmed, setConfirmed] = useState({});
const [deaths, setdeaths] = useState({});
useEffect(() => {
async function fetchData() {
const fetchedData = await virusData();
const { confirmed, recovered, deaths } = fetchedData;
setData(fetchedData);
setRecovered(confirmed);
setConfirmed(recovered);
setdeaths(deaths);
}
fetchData();
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.