反应<select>自动更改不会触发 onChange

Question

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

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

• 阿尔法罗密欧
  • 朱丽埃塔
  • 水户
• 保时捷
  • 辣椒
  • 911

我创建了一个简单的小提琴只是为了向您展示示例和问题： https : //codesandbox.io/s/select-autochange-7bfj6

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

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

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

编辑：实际上，我提出的修复并不是一个实际的修复：'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]);

Answer 2

您可以使用useEffect代替useMemo和另一个state ，其设置第二个选项：

import React, { useEffect } from "react";
import "./styles.css";

export default function App() {
  const alfaForSecondOptions = ["Giulietta", "Mito"];
  const otherForSecondOptions = ["Cayenne", "911"];

  const [firstSelectValue, setFirstSelectValue] = React.useState("Porsche");
  const [secondSelectValue, setSecondSelectValue] = React.useState("911");
  const [secondOptions, setSecondOptions] = React.useState(
    otherForSecondOptions
  );

  useEffect(() => {
    console.log(secondSelectValue);
  }, [secondOptions]);

  useEffect(() => {
    if (firstSelectValue === "Alfa") {
      setSecondOptions(alfaForSecondOptions);
      setSecondSelectValue("Giulietta");
    } else {
      setSecondOptions(otherForSecondOptions);
      setSecondSelectValue("911");
    }
  }, [firstSelectValue]);

  const handleFirstSelectChange = (e) => {
    console.log("First Select Change", e.target.value);
    setFirstSelectValue(e.target.value);
  };

  const handleSecondSelectChange = (e) => {
    console.log("Second Select Change", e.target.value);
    setSecondSelectValue(e.target.value);
  };

  return (
    <div className="App">
      <label>
        <p>Brand</p>
        <select onChange={handleFirstSelectChange} value={firstSelectValue}>
          <option value={"Alfa"} label={"Alfa"} />
          <option value={"Porsche"} label={"Porsche"} />
        </select>
      </label>

      <label>
        <p>Model</p>
        <select onChange={handleSecondSelectChange} value={secondSelectValue}>
          {secondOptions.map((x) => {
            return <option key={x} value={x} label={x} />;
          })}
        </select>
      </label>
    </div>
  );
}