我正在嘗試使用兩個圓環圖和圖表中的繪圖資料構建一個登錄頁面。進行“POST”呼叫以從 API 獲取資料并使用該資訊在登錄頁面中繪制資料圖表。我目前看到在線上超出了最大呼叫堆疊大小：body.json stringify。我是一名 Python 人，正在嘗試學習 React JS 和前端開發。任何方向都非常感謝。
const App=()=> {
const[dataArray, setDataArray] = useState([{"label": "Required configuration", "value": "N/A"}, {"label": "Configuration", "value": 1}]);
const[chartData, setChartData] = useState({labels: ['Graph 1', 'Graph 2'],
datasets: [
{
label: 'Plot',
data: [50,50],
backgroundColor: [
'rgba(156,207,163)',
'rgba(205,185,215)',
],
borderWidth: 1,
cutout: 60
}
]
})
useEffect( () => {
fetchURL()
}, [])
const fetchURL = async ()=> {
const res = await fetchURL("https://example.com", {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' btoa('username:password')
},
body: JSON.stringify( {
'search': 'query',
'output_mode': 'json',
'preview': false,
})
})
console.log(res)
const data = await res.json()
console.log(data.data)
let results = data.data
setChartData( {
labels: result.map((crypto) => crypto.Total),
datasets: [
{
data: results.map((crypto) => Number(crypto.Total)),
backgroundColor: [
'rbga(156,207,163)',
'rgba(205,185,215)',
},
borderWidth:1,
cutout: 60
}
]
});
setDataArray(results.map((crypto) => (
{"label": "Configuration", "value": Number(crypto.Total)}
)))
}
return (
<div className="App">
<div class="main">
<div class="header">
<p> My App </p>
</div>
<div class="content">
<DoughnutChart chartData={chartData}/>
<DoughnutChart chartData={chartData)/>
</div>
<div class="info">
<div>
<span>{dataArray[0].label}</span>
<span>{dataArray[0].value}</span>
</div>
</div>
</div>
);
} 匯出默認應用程式；
uj5u.com熱心網友回復：
你有一個錯字。await fetchURL應該是await fetch。這就是你進入無限遞回回圈的原因。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/504328.html
標籤：javascript 反应 获取 API
上一篇：如何按特定鍵對物件陣列進行分組