Question

我是新来的反应者。我正在使用打字稿，下面是我的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;

我的Cards组件是这样的：-

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>
    );
}

但是我在Cards组件中没有得到更新状态。我的印象是，一旦父状态更改，子组件（在这种情况下为Cards）将重新呈现。我在这里想念东西吗？

Answer 1

从class中删除此部分，我认为您很高兴：

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

setState是react提供的功能，您无需为其编写定义。

异步等待反应打字稿

1 个答案: