React 中的 ChartJS 抛出'too may re-renders'

Question

我正在尝试使用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限制渲染次数以防止无限循环

我应该怎么做才能在我的网页上看到图表?

Answer 1

需要为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

想只运行一次效果吗?

如果您想运行一个效果并只清理一次(在mount和卸载)，您可以传递一个空数组([])作为第二个参数。这告诉React你的效果不依赖于props的任何值或状态，因此它永远不需要重新运行。这不是一个特殊的处理Case -它直接遵循依赖数组的方式作品。

查看文档