我正在嘗試使用 ChartJS 創建條形圖。當我啟動我的應用程式時，網頁上沒有任何內容，并且控制臺中出現一些錯誤：'未捕獲的錯誤：重新渲染過多。React 限制了渲染的數量以防止無限回圈。
我的代碼：
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js'
import {Bar} from 'react-chartjs-2'
import React, {useState, useEffect} from 'react'
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
function App() {
const [chartData, setChartData] = useState({
datasets:[],
})
const [chartOptions, setChartOptions] = useState({});
useEffect(()=>{
setChartData({
labels: ['john','kevin','george','mike','oreo'],
datasets:[
{
label: 'label',
data: [12,55,34,120,720],
borderColor: 'green',
backgroundColor: 'blue',
},
],
})
},[])
setChartOptions({
responsive:true,
plugins:{
legend:{
position:'top'
},
title:{
display:true,
text:'text from tittle'
}
}
})
return (
<div className="App">
<Bar options={chartOptions} data={chartData}/>
</div>
);
}
錯誤：重新渲染太多。React 限制渲染次數以防止無限回圈
我應該怎么做才能在我的網頁上看到圖表？
uj5u.com熱心網友回復：
您需要添加一個依賴陣列到useEffect. 從依賴陣列中排除專案可能會導致無限的更新鏈。
添加依賴陣列作為第二個引數useEffect：
useEffect(()=>{
setChartData({
labels: ['john','kevin','george','mike','oreo'],
datasets:[
{
label: 'label',
data: [12,55,34,120,720],
borderColor: 'green',
backgroundColor: 'blue',
},
],
})
},[])
setChartOptions({
responsive:true,
plugins:{
legend:{
position:'top'
},
title:{
display:true,
text:'text from tittle'
}
}
}, [chartOptions, chartData]) // effect will run when either changes
只想運行一次效果？
如果你想運行一個效果并且只清理一次（在掛載和卸載時），你可以傳遞一個空陣列（[]）作為第二個引數。這告訴 React 你的效果不依賴于任何來自 props 或 state 的值，所以它永遠不需要重新運行。這不是作為特殊情況處理的——它直接遵循依賴項陣列的作業方式。
在檔案中了解更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/479156.html
標籤：反应 反应钩子 图表.js 反应-chartjs-2
上一篇：useEffect不會更新狀態