问题描述
正如标题所说，我正在我的工作中创建一个小型 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 的参考来更新条形图的选项，但我似乎无法让它工作。有没有人有关于如何完成这个的建议？我在这里相对较新，所以我希望我的问题不会违反任何规则，并且很乐意根据需要对其进行编辑。另外，想提供一个最小的例子，但它有几个文件和相当数量的行，所以任何关于如何做到这一点的建议将不胜感激。提前致谢。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）