1

我正在学习反应并获得 API 数据，但我不知道如何在 React Google Charts 中显示。在 React Google Charts 中显示的格式是这样的：

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

这是我的代码：

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;

我用我的失败尝试评论了这条线。我尝试了很多东西，但我无法显示收到的数据

谢谢你的时间

4

1 回答 1

0

您需要setValues在加载 json 数据后运行。您所做的更改在values您运行之前不会生效setValues。

此外，虽然values感觉像一个列表，但也许考虑避免直接使用它.push或类似的。相反，创建其当前状态的本地副本，然后setValues在您拥有地图数据时运行：

    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();
    }, []);

但是，如果您只是以相同的顺序重新分配该数据，那么可能有一种方法可以简化它map，类似于：

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

你可以安全地把它浓缩成一条线，不使用push等等。

我还需要让它只<Chart>在加​​载数据后渲染元素，所以我为此使用了一个单独的状态变量，如下所示：

    [dataLoaded, setDataLoaded] = useState(false),

...

    setValues(newValues);
    setDataLoaded(true);

...

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

您可以只使用值的长度或类似的值作为标志来重构它，而不是完全使用单独的变量。

最后，我还将列标题也放入了状态变量，因此 的data属性<Chart>就是变量的名称。我的是：

    [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]
      } />

不运行setValues是您的版本的主要问题。

就我个人而言，我会避免使用这个词json作为变量名，即使它在小写时没有保留。

于 2020-08-06T19:47:43.330 回答