如何解决无法从API提取数据并在React中绘制数据
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。