我有一个 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, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 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 行：“组件”未定义 no-undef
第 43:12 行：“组件”未定义 no-undef
第 61:37 行：“数据”未定义 no-undef
第 61:44 行：“组件”未定义 no-undef 我在这里缺少什么？