[英]React setState with nested Json
我剛開始自學一些 React。 在我的第一個項目中,我嘗試使用來自 Corona 數據集的數據創建一些基本圖表。 數據集由我自己的 restapi 創建,如下所示:
[{
"Bundesland": "Bayern",
"Landkreis": "LK Erlangen-H\u00f6chstadt",
"Altersgruppe": "A80+",
"Geschlecht": "W",
"AnzahlFall": 1,
"AnzahlTodesfall": 0,
"Meldedatum": 1577836800000,
"IdLandkreis": "09572",
"Datenstand": "05.01.2021, 00:00 Uhr",
"NeuerFall": 0,
"NeuerTodesfall": -9,
"NeuGenesen": 0,
"AnzahlGenesen": 1
},
{
"Bundesland": "Nordrhein-Westfalen",
"Landkreis": "SK K\u00f6ln",
"Altersgruppe": "A35-A59",
"Geschlecht": "W",
"AnzahlFall": 1,
"AnzahlTodesfall": 0,
"Meldedatum": 1577923200000,
"IdLandkreis": "05315",
"Datenstand": "05.01.2021, 00:00 Uhr",
"NeuerFall": 0,
"NeuerTodesfall": -9,
"NeuGenesen": 0,
"AnzahlGenesen": 1
}]
在我使用 useEffect-Hook 獲取數據后,我嘗試使用 useState-Hook 來聲明一個新的數據變量,我可以傳遞不同的反應組件
我當前的代碼方法如下所示:
const [corona, setCorona] = useState([])
useEffect(() => {
d3.json(path).then(res => {
let data = res
setCorona(data)
}).catch(err =>{console.log(err)})
},[])
我假設 api 調用正在工作,因為我可以記錄結果。 但是,我無法使用當前的setCorona方法聲明電暈
React 的 setState 是異步的。 不要立即反映更改(例如 setState 之后的控制台日志)。 我假設這就是問題所在。
import React, { useEffect, useState } from 'react';
const data = [{
"Bundesland": "Bayern",
"Landkreis": "LK Erlangen-H\u00f6chstadt",
"Altersgruppe": "A80+",
"Geschlecht": "W",
"AnzahlFall": 1,
"AnzahlTodesfall": 0,
"Meldedatum": 1577836800000,
"IdLandkreis": "09572",
"Datenstand": "05.01.2021, 00:00 Uhr",
"NeuerFall": 0,
"NeuerTodesfall": -9,
"NeuGenesen": 0,
"AnzahlGenesen": 1
},
{
"Bundesland": "Nordrhein-Westfalen",
"Landkreis": "SK K\u00f6ln",
"Altersgruppe": "A35-A59",
"Geschlecht": "W",
"AnzahlFall": 1,
"AnzahlTodesfall": 0,
"Meldedatum": 1577923200000,
"IdLandkreis": "05315",
"Datenstand": "05.01.2021, 00:00 Uhr",
"NeuerFall": 0,
"NeuerTodesfall": -9,
"NeuGenesen": 0,
"AnzahlGenesen": 1
}]
function Fun(props) {
const [corona, setCorona] = useState([])
const handleClick = () => {
setCorona(data)
}
// This function logs value of corona.
useEffect(() => {
console.log('Logging corona to prove that it is updated.', corona);
}, [corona]);
return (
<div>
<button onClick={handleClick}> Click to update update corona. </button>
</div>
);
}
export default Fun;
我真的不明白你想做什么..-像這樣的事情?
const [corona, setCorona] = useState([])
useEffect(() => {
d3.json(path).then(res => {
setCorona(res.data)
}).catch(err =>{console.log(err)})
},[])
return (
<div> {corona.map()..... and so on} </div>
OR
<div> {corona[0].Bundesland} </div>
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.