Reactjs 值在倒计时，甚至在排版不更新

我正在尝试修改{}到我的国家的项目，因此，我没有在选项框中显示国家并选择一个来更新卡的值，而是尝试在选择一个地区时逐个更新数字选项和区域名称已完成。 但是，当选择一个区域时，数字不更新，只显示零，甚至接收到JSON中的正确数据（甚至传递一个数字也只显示零）。 如果我有点模棱两可的话，我很抱歉，但我是《反应》的新手。我怎样才能做到这一点？它只显示零。。。我花了很多时间试图解决这个问题。 谢谢，而且，99%的工作都来自JavaScript掌握教程。 这是代码。

    import axios from 'axios';

const url = 'https://covid19.mathdro.id/api/countries/CHILE';
export const fetchData = async (provincia) => {
    let changeableUrl = url;
    if (provincia) {
        changeableUrl = `${url}/confirmed`;
        try {
            const {
                data: [  
                    confirmed,
                    recovered,
                    deaths,
                    lastUpdate,
            ]
            } = await axios.get(changeableUrl);
            return {
                confirmed,
                recovered,
                deaths,
                lastUpdate,
            };
        } catch (error) {
            return error;
        }
    } else {
        try {
            const {
                data: {
                    confirmed,
                    recovered,
                    deaths,
                    lastUpdate,
                }
            } = await axios.get(changeableUrl);

            return {
                confirmed,
                recovered,
                deaths,
                lastUpdate,
            };
        } catch (error) {
            return error;
        }
    }
};

export const fetchDailyData = async () => {
    try {
        const {
            data
        } = await axios.get(`${url}`);

        return data.map(({
            confirmed,
            deaths,
            reportDate: date
        }) => ({
            confirmed: confirmed.total,
            deaths: deaths.total,
            date
        }));
    } catch (error) {
        return error;
    }
};

export const fetchCountries = async () => {
    try {
        const {data: provincias } = await axios.get(`${url}/confirmed`);
        return provincias.map((provincia) => provincia.provinceState);
    } catch (error) {
        return error;
    }
};

这是APP.js

    import React from 'react';

// import Cards from './components/Cards/Cards.jsx';
// import Chart from './components/Chart/Chart.jsx';
// import CountryPicker from './components/CountryPicker/CountryPicker.jsx';

import {Cards, Chart, CountryPicker} from './components';
import styles from './App.module.css';
import { fetchData} from './api';
// Acá se agrega el componente
class App extends React.Component {
    state = {
        data: {},
        provincia: '',
    }

    async componentDidMount(){
        const fetchedData = await fetchData();

        this.setState({ data: fetchedData })
    }

    handleCountryChange = async (provincia) => {
        const fetchedData = await fetchData(provincia);
        console.log(fetchedData)
        this.setState({ data: fetchedData, provincia: provincia })
    }


    render() {
        const { data, provincia} = this.state;


        return (
            <div className={styles.container}>
                <Cards data={data} />
                <CountryPicker handleCountryChange = {
                    this.handleCountryChange
                }
                />
                <Chart data={data} provincia={provincia} />
            </div>
        )
    }
}

export default App;

从“React”导入React；
//从“./components/Cards/Cards.jsx”导入卡片；
//从“./components/Chart/Chart.jsx”导入图表；
//从“./components/CountryPicker/CountryPicker.jsx”导入CountryPicker；
从“/components”导入{卡片、图表、CountryPicker}；
从“./App.module.css”导入样式；
从“/api”导入{fetchData}；
//Acáse agrega el componente
类应用程序扩展了React.Component{
状态={
数据：{}，
省：''，
}
异步组件didmount（）{
const fetchedData=等待fetchData（）；
this.setState（{data:fetchedData}）
}
handleCountryChange=async（provincia）=>{
const fetchedData=等待获取数据（省）；
console.log（fetchedData）
this.setState（{data:fetchedData，provincia:provincia}）
}
render（）{
const{data，provincia}=this.state；
返回(
)
}
}
导出默认应用程序；

CARDS.js

    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 Cards = ({ data :{confirmed, recovered, deaths, lastUpdate}}) => {

    if(!confirmed) {
        return 'Cargando...';
    }

    return(
        <div className={styles.container}>
        <Grid container spacing={3} justify="center">
            <Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.infectados)}>
                <CardContent>
                    <Typography color="textSecondary"       gutterBottom>Casos Totales</Typography>
                    <Typography variant="h5">
                        <CountUp  start={0} end={confirmed.value} duration={2.5} separator=","
                        />
                    </Typography>
                    <Typography         color="TextSecondary">{new Date(lastUpdate).toLocaleDateString()}</Typography>
                    <Typography variant="body2">Número de Casos Totales de COVID-19</Typography>
                </CardContent>
            </Grid>
            <Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.recuperados)}>
                <CardContent>
                    <Typography color="textSecondary" gutterBottom>Recuperados</Typography>
                    <Typography variant="h5">
                        <CountUp  start={0} end={recovered.value} duration={2.5} separator=","
                        />
                    </Typography>
                    <Typography         color="TextSecondary">{new Date(lastUpdate).toLocaleDateString()}</Typography>
                    <Typography variant="body2">Número de Casos Recuperados Totales de COVID-19</Typography>
                </CardContent>
            </Grid>
            <Grid item component={Card} xs={12} md={3} className={cx(styles.card, styles.muertes)}>
                <CardContent>
                    <Typography color="textSecondary"       gutterBottom>Muertes</Typography>
                    <Typography variant="h5">
                        <CountUp  start={0} end={deaths.value} duration={2.5} separator=","
                        />
                    </Typography>
                    <Typography         color="TextSecondary">{new Date(lastUpdate).toLocaleDateString()}</Typography>
                    <Typography variant="body2">Número de muertes totales causadas por COVID-19</Typography>
                </CardContent>
            </Grid>
        </Grid>
        </div>
    )
}

export default Cards;

从“React”导入React；
从“@material ui/core”导入{Card，CardContent，排版，Grid}；
从“反应倒计时”导入倒计时；
从“类名称”导入cx；
从“/Cards.module.css”导入样式；
常数卡=（{数据：{已确认、已恢复、死亡、上次更新}}）=>{
如果（！已确认）{
返回“Cargando…”；
}
返回(
卡索斯全集
{新日期（lastUpdate）.toLocaleDateString（）}
Número de Casos总计19例新冠肺炎
复发
{新日期（lastUpdate）.toLocaleDateString（）}
Número de Casos Reciperados全部感染了新冠病毒-19
穆尔提斯
{新日期（lastUpdate）.toLocaleDateString（）}
Número de muertes总体原因为新冠病毒-19
)
}
导出默认卡；

以及COUNTRYPICKER.js（我的例子中是regionpicker）

import React，{useState，useffect}来自“React”；
从“@material ui/core”导入{NativeSelect，FormControl}；
从“/CountryPicker.module.css”导入样式；
从“../../api”导入{fetchCountries}；
const CountryPicker=({
手算钱
}) => {
const[fetchedCountries，setFetchedCountries]=useState（[]）；
useffect（（）=>{
const fetchAPI=async（）=>{
setFetchedCountries（等待fetchCountries（））；
}
fetchAPI（）；
}，[setFetchedCountries]）；
报税表（
{
handleCountryChange（如目标值）
}
} >
{/*这是一种选择*/}
托多智利
{fetchedCountries.map（（provincia，i）=>{provincia}）
)
}
导出默认CountryPicker；

---

问题在于provincia数据的API响应格式

我在api/index.js中修复了它

export const fetchData = async (provincia) => {
    let changeableUrl = url;
    if (provincia) {
        changeableUrl = `${url}/confirmed`;
        try {
            const data = await axios.get(changeableUrl);
            const filteredData = data.data.find((province) => {
                 if (province.provinceState == provincia){
                    return province;
                };
            })
            return {confirmed: {value: filteredData.confirmed} , recovered: {value: filteredData.recovered} , deaths: {value: filteredData.deaths}, 
                        lastUpdate: new Date(filteredData.lastUpdate).toISOString()};
        } catch (error) {
            return error;
        }
    } else {
        try {
            const {
                data: {
                    confirmed,
                    recovered,
                    deaths,
                    lastUpdate,
                }
            } = await axios.get(changeableUrl);

            console.log("fetchdata else: ", confirmed,
                    recovered,
                    deaths,
                    lastUpdate);
            return {
                confirmed,
                recovered,
                deaths,
                lastUpdate,
            };
        } catch (error) {
            return error;
        }
    }
};

---

让我知道这是否适用于您。

请发布组件的代码。您刚刚发布了axios请求。@JMadelaine有。。。谢谢：（我给你的回复是“有用的”，但因为我没有15%的声誉，所以没有公开……我真的不知道该如何感谢你……谢谢！：）

export const fetchData = async (provincia) => {
    let changeableUrl = url;
    if (provincia) {
        changeableUrl = `${url}/confirmed`;
        try {
            const data = await axios.get(changeableUrl);
            const filteredData = data.data.find((province) => {
                 if (province.provinceState == provincia){
                    return province;
                };
            })
            return {confirmed: {value: filteredData.confirmed} , recovered: {value: filteredData.recovered} , deaths: {value: filteredData.deaths}, 
                        lastUpdate: new Date(filteredData.lastUpdate).toISOString()};
        } catch (error) {
            return error;
        }
    } else {
        try {
            const {
                data: {
                    confirmed,
                    recovered,
                    deaths,
                    lastUpdate,
                }
            } = await axios.get(changeableUrl);

            console.log("fetchdata else: ", confirmed,
                    recovered,
                    deaths,
                    lastUpdate);
            return {
                confirmed,
                recovered,
                deaths,
                lastUpdate,
            };
        } catch (error) {
            return error;
        }
    }
};