使用嵌套的 Json 反应 setState

Question

我刚开始自学一些 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方法声明电晕

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

Answer 1

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;

Answer 2

我真的不明白你想做什么..-像这样的事情？

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>

)