使用嵌套的 Json 反应 setState

Question

I just started to teach myself some React. In my first project I'm trying to create some basic charts with data from an Corona Dataset. The dataset gets created by my own restapi and looks like this:

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

After I fetched the data by using the useEffect-Hook, I'm trying to use the useState-Hook to declare a new data variable that I can pass different react components

My current code method looks like this:

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

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

I assume that the api call is working, since i can log the result. However, I am not able to declare corona by using my current setCorona method

Edit: This is the response from the api call

Answer 1

React's setState is asynchronous. Do not reflect the change immediately (like console-log just after setState). I am assuming that's the issue.

---

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

I dont really understand what u want to do..- Something like this?

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>

)