React组件不会重新渲染

Question

有一个自定义的<Select />反应组件，其中包含4个选项-4个警报级别：

1. 严重
2. 主要
3. 未成年人
4. 警告

<Select />组件被多次使用。每次按下添加新按钮，都会创建一个新的<Select />。

<Select />组件当时只有一个选项处于活动状态。例如。可以使用仅1个严重，1个主要，1个次要和1个警告值进行渲染的<Select />-渲染，永远不会同时出现两个。 当按下添加新按钮以创建新的<Select />时，它将自动选择索引最小的可用选项。 （请参阅上面的列表以获取索引：1-4）

新创建的<Select />的值是在其禁用之前（不可点击）创建的<Select />的值

问题：

新<Select />的工作按计划进行，例如。创建了第三个组件，禁用了第一和第二个选项。但是第一个组件使其所有选项均可用且处于活动状态，这是完全错误的。本应禁用其第二和第三个选项。 状态未更改时，“最后未渲染”组件不会重新渲染。由于它们未通过虚拟DOM检查，因此react不会在DOM上看到任何更改，因此不会重新呈现该组件。

我尝试过的方法：

1. 在<Select />组件中添加一个空项，并在页面上添加每个新的<Select />来更改其ID /类，以便react看到ID已更改并重新提供它
2. forceUpdate（）
3. 编写一个函数以手动更改组件的重新渲染状态（几乎与forceUpdate（）相同）

如何在新组件之前渲染组件以查看它们所做的更改并重新渲染？

基本上，代码是此功能的增强功能，因此不必在此处完全添加。

<select>
  <option class="1" value="Critical">critical</option>
  <option class="2" value="Minor">major</option>
  <option class="3" value="Minor">minor</option>
  <option class="4" value="Warning">warning</option>
</select>