修改 React Google Chart 中的数据

Question

i'm learning react and i getted API data but i don't know how can i display in React Google Charts. The format to show in React Google Charts is like this:

['Germany', 200,0],
['United States', 300,0],
['Brazil', 400,0],
['Canada', 500,0],
['France', 600,0],
['RU', 700,0],

This is my code:

import React, { useState, useEffect } from "react";
import Chart from "react-google-charts";

const Map = ({ url }) => {
    const [stats, setStats] = useState(null);
    const [values, setValues] = useState([]);

    const getData = async () => {
        const data = await fetch(url);
        const json = await data.json();
        setStats(json);

        for (const key in json) {
            values.push([json[key].country, json[key].active, json[key].deaths]);
        }
        console.log(values);
        // ["Afghanistan", 5717,169] --> I receive the data perfectly but i don't know how can i display it below     
    };

    useEffect(() => {
        getData();
    }, []);
    return (
        <div className="col-xl-12 text-center mb-3">
            <h4>Hover on map to see...</h4>
            <Chart
                width={"100%"}
                height={"350px"}
                chartType="GeoChart"
                options={{
                    displayMode: "regions",
                    backgroundColor: "#81d4fa",
                    colorAxis: {
                        values: [1000, 10000, 50000, 100000, 1000000],
                        colors: ["#00bc8c", "#f39c12", "#e74c3c", "red", "darkred"],
                    },
                }}
                data={[
                    ["Country", "Active cases", "Deaths"],
                    values.map(value => value + ",") //i tried this...
                ]}
                // Note: you will need to get a mapsApiKey for your project.
                // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
                mapsApiKey="AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
                rootProps={{ "data-testid": "1" }}
            />
        </div>
    );
};

export default Map;

I commented the line with my fail tries. I tried a lot of things but i can't show the data received

Thanks for your time

Answer 1

You need to run setValues after you load your json data. The changes you make to values don't take effect until you run setValues .

Also, although values feels like a list, perhaps consider avoiding using it directly with .push or similar. Instead, create a local copy of its current state, and then run setValues when you have the data for the map:

    useEffect(() => {
        const getData = async () => {
            fetch(url)
            .then(data => data.json())
            .then(json => {
               setStats(json);

               let myVals = [];
               for (let key in json) {
                  const { country, active, deaths } = json[key];
                  myVals.push([country, active, deaths]);
               }
               setValues(myVals);
             });
        };
        getData();
    }, []);

But if you're just reassigning that data with the same order then there could be a way to simplify it with map , something along the lines of:

const newValues = json.map(key => {
   const { country, active, deaths } = json[key];
   return [country, active, deaths];
});
setValues(newValues);

And you could safely condense that into one line, doesn't use push etc.

I also needed to make it only render the <Chart> element after the data was loaded, so I'm using a separate state variable for that, along the lines of:

    [dataLoaded, setDataLoaded] = useState(false),

...

    setValues(newValues);
    setDataLoaded(true);

...

    return <div>{
      dataLoaded ?
      <Chart
          chartType="..."
          data={[
           ['Country', 'Active', 'Deaths'],
           ...values
          ]} /> :
      null}
    </div>;

You could maybe just use the length of values or similar as a flag to refactor it, rather than a separate variable altogether.

I also ended up putting the column headers into the state variable as well, so that the data attribute for the <Chart> is just the name of the variable. Mine is:

    [dataLoaded, setDataLoaded] = useState(false),
    [googleData, setGoogleData] = useState([]),
...
    const googleFormattedData = dataReturnedToGoogleData(0, data);
    let va = googleData;
    va[j] = googleFormattedData;
    setGoogleData(va);
    setDataLoaded(true);
...
 (within a loop)
    <Chart 
       data={
          googleData[data.optionNumber]
      } />

Not running setValues is the main issue with your version.

Personally I'd avoid using the word json as a variable name, even though it's not reserved when it's lowercase.