javascript - React <select> 自动改变不触发onChange

Question

在我的页面中，我有两个 <select>元素，其中第二个的选项取决于第一个的值。

在这种情况下，“问题”是第一个选择中某个值的选项与第一个选择有另一个值时给出的选项不同。基本上:

• 阿尔法罗密欧
  • 朱丽叶塔
  • 美图
• 保时捷
  • 卡宴
  • 911

我创建了一个简单的 fiddle 来向您展示示例和问题:https://codesandbox.io/s/select-autochange-7bfj6

请打开控制台看看我在说什么。所以，基本上，在开始时 'Porsche'和 '911'被选中。然后，如果我改变 '911'至 'Cayenne'一切都很好。

问题是当我更改 'Porsche' 时至 'Alfa' :应该是，第二个选择将其值更改为 'Giulietta' , 但 onChange第二个select的事件没有触发。
我基本确定问题出在 UI 和状态之间的某种不同步:在状态下，secondselect 的值仍然是 '911' ，但由于该选项在第二个选择中不再可用，因此它会自动选择第一个可能的值。但该自动选择只是“图形化”。

我知道这可以通过在第二个选择中添加一个“空”值来解决，选项为 <option value={''} label={'Select a Model'} /> .但我想在第一个选择更改时保持自动选择。

编辑:实际上，我提出的修复不是实际修复:“选择模型”选项的值为 '' ，但是 handleSelectSelectChange仍未触发，因此，虽然 UI 选择值是 '' , 在状态下我还有 '911'

Answer 1

 React.useEffect(()=> {
    if (!secondOptionsMemoized.some(x=> x === secondSelectValue)) {
      console.log('Second Select Change in useEffect');
      setSecondSelectValue(secondOptionsMemoized[0]);
    }
 }, [secondSelectValue, secondOptionsMemoized]);