如何将api中的值保存为数字REACT js

Question

这是我正在使用的apihttps://covid19.mathdro.id/api

我需要取{recovery.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;

Answer 1

您的代码有错误。我试图修复它并能够运行它。请在这里检查更新代码：

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;