有什么方法可以调用 api 并在 reactjs 中使用 useState 保存它？

Question

我在 useEffect 中调用 api 并使用 useState 每次重新加载或访问我的页面时保存它时遇到一些问题。

我在 useEffect 中调用 api，然后使用 datas 变量中的 useState 设置其数据。并使用该数据在元素 中传递一些值。

当我第一次实现它时，它工作得非常好，我正在屏幕上获取我想要显示的数据，但是当我重新加载页面时，它会在屏幕上抛出一些错误，说我的 datas 变量未定义。

我正在分享我的代码和我遇到的错误的 sn-p。请帮我解决这个错误。

代码：-

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Casebox from './casebox';
import StatecaseContainer from './statecaseContainer';

function Home(){

    const [datas, setDatas] = React.useState({});
 
   React.useEffect(function effectFunction() {
       function fetchapi() {
           axios.get('https://api.covid19india.org/data.json')
                .then((response) => {
                    setDatas(response.data);
                });
       }
       fetchapi();
   }, []);


    return (
        <div className="container-fluid caseinfocontainer">

            <div className="row row-cols-1 row-cols-md-4 justify-content-center">

                <Casebox 
                    caseId="totalcases" 
                    caseHeading="Infected"
                    caseCount={datas.statewise[0].confirmed}
                />
                <Casebox 
                    caseId="recovered" 
                    caseHeading="Recovered"
                    caseCount="2892223"
                />
                <Casebox 
                    caseId="deaths" 
                    caseHeading="Deaths"
                    caseCount="2892223"
                />
                <Casebox 
                    caseId="vaccinated" 
                    caseHeading="Vaccinated"
                    caseCount="2892223"
                />
        
            </div>

            <StatecaseContainer />

        </div>
    )
}

export default Home;

我的错误：- enter image description here

注意：- 我想在页面被访问或重新加载时调用 api。

Answer 1

您的 fetch 方法需要一些时间才能完成，因此有时您的 datas 状态在初始状态时未定义。您可以简单地通过添加条件渲染来检查datas 状态是否存在来解决这个问题。

通过在您的 div 前面添加datas &&，它将检查数据的状态。如果datas未定义，则不会显示div，否则会显示。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Casebox from './casebox';
import StatecaseContainer from './statecaseContainer';

function Home(){

    const [datas, setDatas] = React.useState({});
 
   React.useEffect(function effectFunction() {
       function fetchapi() {
           axios.get('https://api.covid19india.org/data.json')
                .then((response) => {
                    setDatas(response.data);
                });
       }
       fetchapi();
   }, []);


    return (
        <div className="container-fluid caseinfocontainer">

            {{datas && <div className="row row-cols-1 row-cols-md-4 justify-content-center">

                <Casebox 
                    caseId="totalcases" 
                    caseHeading="Infected"
                    caseCount={datas.statewise[0].confirmed}
                />
                <Casebox 
                    caseId="recovered" 
                    caseHeading="Recovered"
                    caseCount="2892223"
                />
                <Casebox 
                    caseId="deaths" 
                    caseHeading="Deaths"
                    caseCount="2892223"
                />
                <Casebox 
                    caseId="vaccinated" 
                    caseHeading="Vaccinated"
                    caseCount="2892223"
                />
        
            </div>}}

            <StatecaseContainer />

        </div>
    )
}

export default Home;