我正在嘗試繪制一個圖表，顯示 X 天的體重減輕。我創建了一個使用 json 檔案存盤資料的 RESTful API 端點，我正在嘗試將該資料連接到圖表。
在下面的函式中，我嘗試獲取資料，但它列印出一個空陣列 4 次。我不明白為什么它會發射4次。
然而它變得更奇怪了。如果我將虛擬資料輸入圖表，然后將制度[0]['weight'] 添加到資料集中，它將暫時起作用。重繪 頁面會導致它再次中斷。
我有點迷失為什么我一開始在我的回應請求中沒有回傳任何資料，然后是可用的。這導致圖表中斷，因為它一直在讀取沒有可用的資料。
應用程式.js
import './App.css';
import { useState } from "react";
import React, { useEffect } from "react";
import axios from 'axios'
import Chart from 'react-apexcharts'
function App() {
return (
<div className="App">
<header className="App-header">
<MyRegimeChart />
</header>
</div>
);
}
function MyRegimeChart(){
const [regime, setRegime] = useState([])
useEffect(() => {
axios
.get('http://localhost:3001/regime')
.then(response => {
setRegime(response.data)
})
}, [])
console.log(regime);
return (
<Chart
type="area"
width={700}
height={450}
series={[
{
name: 'Shawn',
data: [175, regime[0]['weight'], 160, 155, 150, 145, 140],
color: '#ff0000'
}
]}
options={{
// colors:["#ff0000", "#0000ff"]
theme: {
mode: 'dark'
},
chart: {
stacked:false
},
tooltip:{
followCursor:true
},
xaxis:{
tickPlacement: 'on',
categories:[1, 2, 3, 4, 5, 6, 7],
title:{
text: "Days",
style:{
color:'white'
}
}
},
yaxis:{
title:{
text: "Weight",
style:{
color: 'white'
}
}
},
legend:{
show:true,
position:'right'
},
title:{
text: 'Weight Loss',
style: {
fontSize: 24
}
},
subtitle:{
text: 'Weight loss over months'
}
}}
>
</Chart>
)
}
export default App;
json檔案：
{
"regime": [
{
"day": "May 27th, 2022",
"weight": 166.2,
"meals": ["Nachoes", "Garlic Jerky"],
"workout": "Body Combat 69"
},
{
"day": "May 26th, 2022",
"weight": 166.4,
"meals": ["Breakfast", "Steak and Kale"],
"workout": "Body Combat 41"
}
]
}
當我第一次加載頁面時，它回傳 4 個空陣列。
如果我在頁面加載后將圖表資料集從亂數編輯為制度[0]['weight']，它將起作用。重繪 頁面會再次破壞它。
uj5u.com熱心網友回復：
阻止您的組件在資料可用之前呈現圖表。最好的方法是添加一個 if 條件，如下所示：
{ regime.length && <Chart>...</Chart>}
uj5u.com熱心網友回復：
從服務器獲取資料時，應用程式需要時間來下載。在此期間，資料將為空。因此，您需要添加一個名為“加載”的布林值。
function App() {
const [data,setData] = useState([]);
const [loading,setLoading] = useState(true);
React.useEffect(()=> {
// Get data from server
setData(data_of_server)
setLoading(false);
},[])
if (loading){
return <Loading />
}
return (
<Chart data={data} />
)
}
注意：看看'useReducer()'。
// if you don't want new state loading
return <>
{data.length === 0 ? <Loading/> : <Chart data={data} />}
</>
uj5u.com熱心網友回復：
添加到其他答案中，您應該驗證資料為空的情況，因為它將在第一次渲染中為空。根據React 檔案，第一次呼叫 useEffect 發生在第一次渲染之后：
每次渲染后都會運行 useEffect 嗎？是的！默認情況下，它會在第一次渲染后和每次更新后運行。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/482147.html