这是我正在使用的API https://covid19.mathdro.id/api
我需要使用{recovered.value}并将其除以{confirmed.value}，然后将结果乘以100以得到恢复百分比。但是这些值是字符串而不是数字
这是文件
import React from "react";
import { Card, CardContent, Typography, Grid } from "@material-ui/core";
import CountUp from "react-countup";
import cx from "classnames";
import styles from "./Cards.module.css";
const Info = ({ data: { confirmed, recovered, deaths, lastUpdate } }) => {
if (!confirmed) {
return "Loading...";
}
return (
<div className={styles.container}>
<Grid container spacing={3} justify="center">
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.infected)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Infected
</Typography>
<Typography variant="h5" component="h2">
<CountUp
start={0}
end={confirmed.value}
duration={2.75}
separator=","
/>
<div>
{recovered.value}/{confirmed.value}
</div>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of active cases of COVID-19.
</Typography>
</CardContent>
</Grid>
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.recovered)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Recovered
</Typography>
<Typography variant="h5" component="h2">
<CountUp
start={0}
end={recovered.value}
duration={2.75}
separator=","
/>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of recoveries from COVID-19.
</Typography>
</CardContent>
</Grid>
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.deaths)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Deaths
</Typography>
<Typography variant="h5" component="h2">
<CountUp
start={0}
end={deaths.value}
duration={2.75}
separator=","
/>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of deaths caused by COVID-19.
</Typography>
</CardContent>
</Grid>
</Grid>
</div>
);
};
export default Info;
并且我已经尝试在代码的这一部分中对parseInt进行确认，但是并没有唤醒
const Info = ({ data: { parseInt(confirmed), recovered, deaths,
lastUpdate } }) => {
if (!confirmed) {
return "Loading...";
}
....
这是我的app.js
import React from "react";
import { Cards, CountryPicker, Chart } from "./components";
import { fetchData } from "./api/";
import styles from "./App.module.css";
class App extends React.Component {
state = {
data: {},
country: "",
};
componentWillUpdate() {
console.log("hello");
}
async componentDidMount() {
const data = await fetchData();
this.setState({ data });
console.log("data");
}
handleCountryChange = async (country) => {
const data = await fetchData(country);
this.setState({ data, country: country });
console.log("data");
};
render() {
const { data, country } = this.state;
return (
<div className={styles.container}>
<Cards data={data} />
<CountryPicker handleCountryChange={this.handleCountryChange} />
<Chart data={data} country={country} />
</div>
);
}
}
export default App;
您的代码中有错误。我试图修复它并能够运行它。请在此处检查更新代码：
import React from "react";
import {Card, CardContent, Typography, Grid} from "@material-ui/core";
import CountUp from "react-countup";
import cx from "classnames";
import {makeStyles, useTheme} from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
container: {},
infected: {},
recovered: {},
deaths: {}
}));
const Info = ({data: {confirmed, recovered, deaths, lastUpdate}}) => {
const styles = useStyles();
return (
<div className={styles.container}>
<Grid container spacing={3} justify="center">
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.infected)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Infected
</Typography>
<Typography variant="h5" component="h2">
<CountUp
start={0}
end={confirmed.value}
duration={2.75}
separator=","
/>
<div>
{recovered.value}/{confirmed.value}
</div>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of active cases of COVID-19.
</Typography>
</CardContent>
</Grid>
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.recovered)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Recovered
</Typography>
<Typography variant="h5" component="h2">
<CountUp
start={0}
end={recovered.value}
duration={2.75}
separator=","
/>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of recoveries from COVID-19.
</Typography>
</CardContent>
</Grid>
<Grid
item
xs={12}
md={3}
component={Card}
className={cx(styles.card, styles.deaths)}
>
<CardContent>
<Typography color="textSecondary" gutterBottom>
Deaths
</Typography>
<Typography variant="h5" component="h2">
<CountUp
start={0}
end={deaths.value}
duration={2.75}
separator=","
/>
</Typography>
<Typography color="textSecondary">
{new Date(lastUpdate).toDateString()}
</Typography>
<Typography variant="body2" component="p">
Number of deaths caused by COVID-19.
</Typography>
</CardContent>
</Grid>
</Grid>
</div>
);
};
export default Info;
您应该在应用程序组件中使用信息组件，如下所示：
import React from 'react';
import Info from "./Info";
class App extends React.Component {
render() {
let data = {
confirmed: {value: 245550},
recovered: {value: 4555},
deaths: {value: 4534},
lastUpdate: Date.now()
};
return (
<Info data={data}/>
)
}
}
export default App;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句