无法从API提取数据并在React中绘制数据

问题描述

我有一个API

http://api.openweathermap.org/data/2.5/forecast?q=bengaluru&appid={API_KEY}

我正在尝试从该API提取数据并使用react-google-charts绘制数据。
代码：

import React from 'react';

import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography'


// charts
import Chart from "react-google-charts";

const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,}
  }));
  

  export default function Dashboard() {
    initialState = { 
        dataLoadingStatus: 'loading',chartData: [] 
    }; 
    didMount = { async function(params) {
            const response = await fetch (
                'http://api.openweathermap.org/data/2.5/forecast?q=bengaluru&appid={API_KEY}',)
            const json = await response.json()
            const temp_min = Object.keys(json.main.temp_min)
            const temp_max = Object.values(json.main.temp_max)
            const chartData = [['temp_min','temp_max']]
            for (let i = 0; i < temp_min.length; i += 1) {
                chartData.push([temp_min[i],temp_max[i]])
            }
            component.setState({
                dataLoadingStatus: 'ready',chartData: chartData,})
        }
    }
    const classes = useStyles();
    return component.state.dataLoadingStatus === 'ready' ? (
        <div className={classes.root}>
            <div container>
                <h2>
                    Weather Data
                </h2>
            </div>
            <Grid container spacing={3}>
                <Grid item xs={6} sm={6}>
                    <Card className={classes.root}>
                        <CardContent>
                            <Typography className={classes.title} color="textSecondary" gutterBottom>
                                Sample Data
                            </Typography>
                            <Chart
                            chartType="ColumnChart"
                            loader={<div>Loading Chart</div>}
                            data={
                                data = component.state.chartData
                            }
                            options={{
                            title: 'Temparature data',chartArea: { width: '100%' },hAxis: {
                                title: 'Temparature',minValue: 0,},vAxis: {
                                title: 'Temparature',}}
                            legendToggle
                        />
                        </CardContent>
                    </Card>
                </Grid>
                <Grid item xs={6} sm={6}>
                    <Card className={classes.root}>
                        <CardContent>
                            <Typography className={classes.title} color="textSecondary" gutterBottom>
                                Sample Data
                            </Typography>
                        </CardContent>
                        <Chart
                            width={400}
                            height={300}
                            chartType="BubbleChart"
                            loader={<div>Loading Chart</div>}
                            data={[
                                ['ID','Life Expectancy','Fertility Rate','Region','Population'],['CAN',80.66,1.67,'north America',33739900],['DEU',79.84,1.36,'Europe',81902307],['DNK',78.6,1.84,5523095],['EGY',72.73,2.78,'Middle East',79716203],['GBR',80.05,2,61801570],['IRN',72.49,1.7,73137148],['IRQ',68.09,4.77,31090763],['ISR',81.55,2.96,7485600],['RUS',68.6,1.54,141850000],['USA',78.09,2.05,307007000],]}
                            options={{
                            title:
                                'Correlation between life expectancy,fertility rate ' +
                                'and population of some world countries (2010)',hAxis: { title: 'Life Expectancy' },vAxis: { title: 'Fertility Rate' },bubble: { textStyle: { fontSize: 11 }},}}
                        />
                    </Card>
                </Grid>
            </Grid>
        </div>
    ) : (
        <div>Fetching data from API</div>
    )
}  

当我尝试运行此代码时，出现此错误：

第21：5行：未定义'initialState'no-undef
第25：5行：未定义'didMount'no-undef
第36:13行：未定义'component'no-undef
第43:12行：未定义'component'no-undef
61:37行：未定义'数据'no-undef
行61:44：“ component”未定义no-undef 我在这里想念什么？

解决方法

好吧，在声明变量时，您没有使用var，let或const。

Line 21:5: 'initialState' is not defined no-undef
Line 25:5: 'didMount' is not defined no-undef
Line 36:13: 'component' is not defined no-undef
Line 43:12: 'component' is not defined no-undef
Line 61:37: 'data' is not defined no-undef
Line 61:44: 'component' is not defined no-undef