javascript - 如何使用多个图表的多个下拉元素正确处理 ReactJS 中的状态变化

Question

到目前为止，当我在一个下拉元素中选择任何值时，我知道如何只更新一个图表。但我不知道如何实现一些代码来为多个图表做同样的事情。我想要呈现的是一个带有多个下拉列表和图表的仪表板。每个下拉值同时控制选项卡中的所有图表。

我尝试的是以下（对不起，我没有发布我的代码，它太大并且它有几行代码用于其他目的）：

1. 我创建了一个类（我没有使用 Hooks），我在其中处理所有内容的状态更改：图表和下拉列表。
2. 我创建了一个ComponentWillMount来从我的数据库中提取数据。在这个组件中，我更新了包含一个图表数据的数据集。
3. 我创建了一个ComponentDidMount，在其中更新了下拉元素的状态（只有一个下拉列表）。
4. 我创建了一个handleChange函数，在该函数中我根据下拉列表中的选择集更新图表值。
5. 我最终渲染了下拉列表和图表元素，我在其中调用了handleChange函数和数据集。

现在，我不知道如何使用其他元素。我以为我可以：

1. 更新我在ComponentWillMount中的所有图表数据集。
2. 更新我在handleChange中的所有图表。

但是，我对两个图表进行了尝试，但无法正常工作（只有一个正在更新）。我不确定我是否没有正确使用我提到的组件。我尝试寻找示例，但其中一些只使用一个下拉菜单，或者他们使用 React 钩子。

总之，我正在寻求帮助来构建我的代码，以便我可以正确处理我的组件状态更改。

先感谢您。

标签： javascriptreactjschart.js