2

我有一个 JSON，它是：

{
   "cod":"200",
   "message":0,
   "cnt":40,
   "list":[
      {
         "dt":1601024400,
         "main":{
            "temp":301.11,
            "feels_like":301.34,
            "temp_min":301.11,
            "temp_max":301.2,
            "pressure":1010,
            "sea_level":1010,
            "grnd_level":907,
            "humidity":58,
            "temp_kf":-0.09
         },
         "weather":[
            {
               "id":803,
               "main":"Clouds",
               "description":"broken clouds",
               "icon":"04d"
            }
         ],
         "clouds":{
            "all":68
         },
         "wind":{
            "speed":4.24,
            "deg":238
         },
         "visibility":10000,
         "pop":0.25,
         "sys":{
            "pod":"d"
         },
         "dt_txt":"2020-09-25 09:00:00"
      }
   ]
}

我正在使用useAsync钩子来提取数据。

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'

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

// async
import { useAsync } from 'react-async';

const loadUsers = async () =>
  await fetch("http://api.openweathermap.org/data/2.5/forecast?q=bengaluru&appid={API_KEY}")
    .then(res => (res.ok ? res : Promise.reject(res)))
    .then(res => res.json())
  

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        padding: theme.spacing(5)
    },
    paper: {
        padding: theme.spacing(2),
        textAlign: 'left',
        color: theme.palette.text.secondary,
    },  
}));

export default function Dashboard() {
   
    const { data, error, isLoading } = useAsync(
        { 
            promiseFn: loadUsers 
        }
    )
    const classes = useStyles();
    if (isLoading) return "Loading..."
    if (error) return `Something went wrong: ${error.message}`
    console.log("Data is", data)
    if (data)

    return (
        <div className="container">
            <div className="App">
                <h2>Weather Details</h2>
            </div>
            <div className={classes.root}>
                <Grid container spacing={3}>
                    <Grid item xs={4}>
                        <Card className={classes.root} variant="outlined">
                            <CardContent>
                                <Typography className={classes.title} color="textFirst" gutterBottom>
                                    Temparature Data:
                                </Typography>
                                <Typography variant="body2" component="p">
                                
                                </Typography>
                            </CardContent>
                        </Card>
                    </Grid>
                    <Grid item xs={4}>
                        <Card className={classes.root} variant="outlined">
                            <CardContent>
                                <Typography className={classes.title} color="textFirst" gutterBottom>
                                    Pressure Data:
                                </Typography>
                                <Typography variant="body2" component="p">
                                    
                                </Typography>
                            </CardContent>
                        </Card>
                    </Grid>
                    <Grid item xs={4}>
                        <Card className={classes.root} variant="outlined">
                            <CardContent>
                                <Typography className={classes.title} color="textFirst" gutterBottom>
                                    Wind Data:
                                </Typography>
                                <Typography variant="body2" component="p">
                                    
                                    
                                </Typography>
                            </CardContent>
                        </Card>
                    </Grid>
                </Grid>
            </div>
            {data.list.map((weather, index) => (
                <div key={index} className="row"> 
                <div className="col-md-12">
                    <p>{weather.main.temp_min}</p>
                    <p>{weather.main.temp_max}</p>
                </div>
                </div>
            ))}
        </div>
    )

}

temp_min并temp_max成功拉动。
但是当我将我的card代码修改为

<Card className={classes.root} variant="outlined">
                            <CardContent>
                                <Typography className={classes.title} color="textFirst" gutterBottom>
                                    Temparature Data:
                                </Typography>
                                <Typography variant="body2" component="p">
                                    <Chart
                                        chartType="BarChart"
                                        data = {
                                            weather.main.temp_min
                                        }
                                    />
                                </Typography>
                            </CardContent>
                        </Card>

我收到此错误：

“天气”未定义 no-undef

我该如何绘图temp_min？

4

1 回答 1

2

您尝试访问一个不存在的变量（weather未在此范围内声明）。如果我正确理解您的意图，您会尝试temp_min在图表中绘制所有内容，因此请在您的数组上进行投影。

更新：

根据文档，您需要提供代表一个数据点的 x 和 y 值对。数据数组的第一个值对必须是图的标题。

const mapped = data.list.map(d => [new Date(d.dt), d.main.temp_min]);
const chartData = [["Time", "Temperature"], ...mapped];

<Card className={classes.root} variant="outlined">
  <CardContent>
    <Typography className={classes.title} color="textFirst" gutterBottom>
      Temparature Data:
    </Typography>
    <Typography variant="body2" component="p">
      <Chart
        chartType="BarChart"
        data={chartData}
      />
    </Typography>
  </CardContent>
</Card>
于 2020-09-27T22:27:18.313 回答