如何使用 React Chart.js 在一个 canvas 中分别渲染两个折线图以利用 useMemo-Hook？

Question

我在使用 React-ChartJS-2 构建的图表时遇到问题：

我在一个 canvas 中有两个折线图，其中一个是交互式的（用户可以激活点并可以比较该图表上的不同值）另一个只是一个 static 图表，它应该是用户的方向。 如果用户激活交互式图形上的数据点（这会更改道具，因此 useMemo Hook 不起作用），我试图阻止重新呈现 static 图形。 有没有办法将两个数据集分成两个单独的组件，这样 static 图的道具就不会改变，而不会出现一些 hacky CSS？

先感谢您！

我通过停用 animation 找到了一个解决方案，这样用户就看不到重新渲染，但我猜这不是最好的。 现在我正在尝试渲染两条折线图，并尝试使用 CSS 将一个堆叠在另一个之上

Answer 1

你好 @Lucas2101 用代码示例回答你的问题会更容易。 您需要 useMemo 挂钩的原因是什么。 为了回答您的一个问题，useMemo 挂钩会在依赖项数组中的项目更新时运行，因此可能是您没有向该数组添加正确的内容。 我不能肯定地说，因为我没有代码。