Javascript 反应类型脚本中的异步等待

我是新来的。我正在使用typescript，下面是我的package.json

{
  "name": "corona-tracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.9.14",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.9.0",
    "react-countup": "^4.3.3",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "^3.9.3"
  },
  "scripts": {
    "start": "PORT=4006 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

以下是我的主要部分：

import React from 'react';
import { Cards, Chart, CountryPicker } from './components';

import styles from './App.module.css';
import { CoronaData, fetchData } from "./api";


class App extends React.Component {

    state: CoronaData = {
        confirmed: 10,
        deaths: 1,
        recovered: 1,
        lastUpdated: '',
    };

    setState(data: CoronaData) {
        this.state = data;
    }

    async componentDidMount() {
        let cData: CoronaData;
        cData = await fetchData();
        this.setState(cData);
    }

    render() {
        return(<div className={styles.container}>
            <h1>
            <Cards confirmed={this.state.confirmed} recovered={this.state.recovered} deaths={this.state.deaths} lastUpdated={this.state.lastUpdated}/>
            <Chart/>
            <CountryPicker/>
        </h1>
        </div>);
}
}

export default App;

从“React”导入React；
从“/components”导入{卡片、图表、CountryPicker}；
从“./App.module.css”导入样式；
从“/api”导入{CoronaData，fetchData}；
类应用程序扩展了React.Component{
州：CoronaData={
确认：10，
死亡人数：1，
恢复:1,，
上次更新：“”，
};
设置状态（数据：CoronaData）{
this.state=数据；
}
异步组件didmount（）{
让cData:CoronaData；
cData=等待获取数据（）；
this.setState（cData）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

我的卡片组件是这样的：-

import React from 'react';
import styles from './Cards.module.css';
import { Card, CardContent, Typography, Grid } from "@material-ui/core";
import {CoronaData} from "../../api";

export const Cards: React.FC<CoronaData> = ( { confirmed, recovered, deaths, lastUpdated } ) => {
    return (
        <div className={styles.container}>
            <Grid container spacing={3} justify="center">
                <Grid item component={Card}>
                    <CardContent>
                        <Typography color="textSecondary" gutterBottom>  Infected  </Typography>
                        <Typography variant="h5"> { confirmed.valueOf() }  </Typography>
                        <Typography color="textSecondary">  REAL DATE  </Typography>
                        <Typography variant="body2"> Number of active cases of Covid-19 </Typography>
                    </CardContent>
                </Grid>
            </Grid>
        </div>
    );
}

从“React”导入React；
从“/Cards.module.css”导入样式；
从“@material ui/core”导入{卡片、卡片内容、排版、网格}；
从“../../api”导入{CoronaData}；
导出常量卡：React.FC=（{已确认、已恢复、已死亡、上次更新}）=>{
返回(
感染
{已确认。valueOf（）}
真实日期
新冠病毒-19活跃病例数
);
}

---

但是我没有在Cards组件中获得更新状态。我的印象是，一旦父级状态发生变化，子组件（在本例中为卡片）将重新渲染。我在这里遗漏了什么吗？

从

类中删除此部分，我认为您可以继续：

setState（数据：CoronaData）{
this.state=数据；
}

setState
是react公开的函数，您不需要为它编写定义。
您不应该直接改变组件状态。使用本机设置状态，不要覆盖它。状态的接口应作为泛型传递给组件