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

Question

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

我在 useEffect 中调用 api，而不是在 datas 中使用 useState 设置其数据 variable.and 使用该数据在元素 .

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

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

代码:-

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

您的获取方法需要一些时间才能完成，因此有时您的 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;

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

Is there any way to call the api and save it using useState in reactjs?

reactjs

react-router

react-dom

axios

react-hooks