reactjs - 如何在 React Material-UI 应用程序中更新 react-chartjs-2 条形图的选项而不重新渲染？

Question

正如标题所说，我正在我的工作中创建一个小型 React 应用程序（使用更新的功能样式），它将 React Material-UI 自动完成组件与 Chart.js 条形图（使用 react-chartjs-2）耦合。我还使用 NPM 包 react-color 来允许用户为条形图选择颜色。我创建了一个小的 REST API，它返回图表所需的数据。总的来说，我对 React 和 Javascript 非常陌生，我确信我没有以最佳方式处理这个问题。基本上，我发现确定如何构建此应用程序并确保仅在选择新的自动完成选项时才发生重新渲染非常复杂。

我的文件结构如下所示（取出一些文件以使其更简单）：

src
 ┣ components
 ┃ ┣ DataList.jsx
 ┃ ┗ RejectBarChart.jsx
 ┗ App.js

DataList 从我的 API 创建并填充自动完成组件。一旦用户在 Autocomplete 中选择了一个选项，它就会使用 onChange 传递选项以在 App.js 中设置状态，然后将其传递给 RejectBarChart 组件。RejectBarChart 只接受一个 Autocomplete 选项和 react-color 颜色选择作为道具，然后在 useEffect 调用中从我的 API 获取适当的数据并使用指定的颜色绘制条形图。我正在使用 react-color 中的 PhotoshopPicker 组件来选择颜色。

我想解决的一个问题是，每次我选择一种新颜色并使用 onChangeComplete 将其传递给 RejectBarChart 时，它都会完全重新渲染条形图（即它调用我的 API 并完全重绘条形图。你可以想象一下如果使用 onChange 而不是目标，这将导致多少 API 调用）。相反，我想使用我传递给 RejectBarChart 的参考来更新条形图的选项，但我似乎无法让它工作。有人对如何完成这个有建议吗？我在这里相对较新，所以我希望我的问题不会违反任何规则，如果需要，我很乐意对其进行编辑。另外，想提供一个最小的例子，但它有几个文件和相当多的行，所以任何关于如何做到这一点的建议都将不胜感激。提前致谢。

标签： reactjsmaterial-uireact-chartjs-2