亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無法讀取未定義的“活動”屬性 - React API 調用

無法讀取未定義的“活動”屬性 - React API 調用

呼啦一陣風 2023-04-27 16:50:24
我想知道我做錯了什么。我試圖顯示從該 API 調用中接收到的數據,但遇到錯誤。當我使用 React DevTool 檢查時,我的狀態得到了數據。當我嘗試從該對象訪問數據時,顯示{total.ts}有效但無效。{total.data.active}順便說一句,我也想知道,我收到了一個對象:useState({})是正確的嗎?感謝您的未來答案并幫助我,這可能并不困難。import React, { useEffect, useState } from "react";import Axios from "axios";function Total() {  const [total, setTotal] = useState({});  useEffect(() => {    Axios.get("https://covid2019-api.herokuapp.com/v2/total").then(      (response) => {        setTotal(response.data);      }    );  }, []);  return (    <>      <h1>Hello from Total</h1>      <div className="global-container">        <div className="title-container"></div>        <div className="data-container">{total.data.active}</div>        <div className="date-container">{total.ts}</div>      </div>    </>  );}export default Total;
查看完整描述

2 回答

?
函數式編程

TA貢獻1807條經驗 獲得超9個贊

您的問題很可能是 total.data.active 會生成一個 js 錯誤,因為在您獲得 ajax 調用響應之前 total.data 是未定義的。對此進行檢查可能會解決問題。


這是一個如何完成的示例(我使用 fetch 而不是 Axios 但這不是重要的部分):


import React, { useEffect, useState } from "react";

import "./styles.css";


export default function App() {

  const [total, setTotal] = useState({});


  useEffect(() => {

    fetch("https://covid2019-api.herokuapp.com/v2/total")

      .then((response) => response.json())

      .then((responseBody) => {

        setTotal(responseBody);

      });

  }, []);


  return (

    <>

      <h1>Hello from Total</h1>

      <div className="global-container">

        <div className="title-container"></div>

        <div className="data-container">

          {total && total.data ? total.data.active : ''}

        </div>

        <div className="date-container">{total.ts}</div>

      </div>

    </>

  );

}


查看完整回答
反對 回復 2023-04-27
?
呼喚遠方

TA貢獻1856條經驗 獲得超11個贊

您應該在加載數據時添加條件,因為您的 api 調用是異步的


import React, { useEffect, useState } from "react";

import Axios from "axios";


function Total() {

  const [total, setTotal] = useState(null);


  useEffect(() => {

    Axios.get("https://covid2019-api.herokuapp.com/v2/total").then(

      (response) => {

        setTotal(response.data);

      }

    );

  }, []);


  return (

    <>

      <h1>Hello from Total</h1>

      {

        total ? (

         <div className="global-container">

           <div className="title-container"></div>

           <div className="data-container">{total.data.active}</div>

           <div className="date-container">{total.ts}</div>

         </div>

        ) : (

          <div>Loading...</div>

        )

      }

    </>

  );

}


export default Total;


查看完整回答
反對 回復 2023-04-27
  • 2 回答
  • 0 關注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號