Javascript 使用嵌套的Json响应setState

我刚开始教自己一些反应。在我的第一个项目中，我试图用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
  }]

const [corona, setCorona] = useState([])

useEffect(() => {
    d3.json(path).then(res => { 
        let data = res
        setCorona(data)
    }).catch(err =>{console.log(err)})
},[])

在使用useEffect钩子获取数据之后，我尝试使用useState钩子声明一个新的数据变量，我可以传递不同的组件

我当前的代码方法如下所示：

[{
    "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
  }]

const [corona, setCorona] = useState([])

useEffect(() => {
    d3.json(path).then(res => { 
        let data = res
        setCorona(data)
    }).catch(err =>{console.log(err)})
},[])

我假设api调用正在工作，因为我可以记录结果。但是，我无法使用当前的setCorona方法声明corona

编辑：这是来自api调用的响应

---

我真的不明白你想做什么- 像这样的

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>

)

const[corona，setCorona]=useState（[]）
useffect（（）=>{
json（path）.then（res=>{
setCorona（分辨率数据）
}).catch（err=>{console.log（err）}）
},[])
返回(
{corona.map（）……等等}
或
{corona[0].邦德斯兰}
)

React的设置状态是异步的。不要立即反映更改（如setState之后的控制台日志）。我想这就是问题所在

---

import React，{useffect，useState}来自“React”；
常数数据=[{
“邦德斯兰”：“拜仁”，
“Landkreis”：“LK Erlangen-H\u00f6chstadt”，
“Altersgruppe”：“A80+”，
“Geschlecht”：“W”，
“AnzahlFall”：1，
“AnzahlTodesfall”：0，
“Meldedatum”：157783680000，
“IdLandkreis”：“09572”，
“Datenstand”：“2021年1月5日00:00 Uhr”，
“NeuerFall”：0，
“NeuerTodesfall”：-9，
“NeuGenesen”：0，
“AnzahlGenesen”：1
},
{
“邦德斯兰”：“北莱茵威斯特法伦”，
“Landkreis”：“SK K\u00f6ln”，
“Altersgruppe”：“A35-A59”，
“Geschlecht”：“W”，
“AnzahlFall”：1，
“AnzahlTodesfall”：0，
“Meldedatum”：15779232000，
“IdLandkreis”：“05315”，
“Datenstand”：“2021年1月5日00:00 Uhr”，
“NeuerFall”：0，
“NeuerTodesfall”：-9，
“NeuGenesen”：0，
“AnzahlGenesen”：1
}]
功能乐趣（道具）{
const[corona，setCorona]=useState（[]）
常量handleClick=（）=>{
setCorona（数据）
}
//此函数记录电晕的值。
useffect（（）=>{
console.log（'记录corona以证明其已更新'，corona）；
}，[corona]）；
返回(
单击以更新corona。
);
}
导出默认值；

如果您已验证电晕设置为正确的值，那么我不确定您的实际问题是什么？我看不出这段代码中有任何明显的错误。可能是我试图将整个json用作corona的值的问题吗？虽然在呈现过大的数据集时可能会遇到性能问题，但使用它实际上并没有什么问题。但是你的问题没有真正意义。当你调用setCorona时，你没有声明corona。你可以把它看作是对corona的赋值。我试图将json作为数组设置为corona变量，这样我就可以在html中实现数组中的值，或者将它们传递给其他组件。问题是corona是一个空数组，即使在“then”之后调用setCorona（）@rin_o first console log“res”也是如此。看看你从服务器上得到了什么。然后选择正确的对象并将其设置为您的状态。然后在返回之前添加另一个控制台日志，以查看此变量中将重新呈现的值。它应该有用。@ZiedHf谢谢你的投入，帮了我很多忙！但是，如果使用上面的示例，我会得到TypeError：无法读取未定义的属性“Bundesland”。数组仍然为空。但是，如果我关注json中的一个特定值，我可以在html@rin_o如果corona的默认值为null、未定义或空数组，那么请确保您的应用程序将崩溃。请改为这样写：corona[&&corona[0]&&corona[0]。Bundesland感谢您的回答，它帮助我理解react背后的逻辑！我可以创建一个函数，例如每隔30秒调用setState一次，而不是像您在示例代码中那样使用handleClick吗？@rin_o检查一下。