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

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;
添加回答
舉報