当我使用CoreUI ChartBar时，
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'GitHub Commits',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
},
],
}} type={'bar'} />我得到一个错误。**chart.esm.js：5354
Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.
at new Chart (chart.esm.js:5354:1)
at renderChart (CChart.tsx:160:1)
at CChart.tsx:242:1
at commitHookEffectListMount (react-dom.development.js:23049:1)
at invokePassiveEffectMountInDEV (react-dom.development.js:25044:1)
at invokeEffectsInDev (react-dom.development.js:27304:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27283:1)
at flushPassiveEffectsImpl (react-dom.development.js:27007:1)
at flushPassiveEffects (react-dom.development.js:26935:1)
at commitRootImpl (react-dom.development.js:26886:1)**
代码没有任何变更。
1条答案
按热度按时间f4t66c6m1#
看起来
core-ui在幕后使用了react-chartjs-2。这是一个已知的问题，但是我在重现错误时遇到了麻烦。请检查react-chartjs-2' issues中的此线程。特别是MartinP-C的注解。如果你能提供一个复制品，将不胜感激。
我收到了这个错误（在React 18.0.1中，在严格模式下再次出现），删除严格模式可以停止错误（因为在开发模式下，严格模式会两次调用生命周期函数？因此可以重用画布？https：//reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects）
然而！Strict Mode本身并不是问题所在。我没有注册Chart.JS组件，而抛出的错误（“”arc”不是已注册的元素“）一定是导致React两次调用并尝试重用画布。
修复注册的元素错误也停止了“Canvas already in use”错误。（注册组件：https://react-chartjs-2.js.org/docs/migration-to-v4#tree-shaking)