反應<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>
  );
}