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

Question

在我的页面中，我有两个元素，第二个的选项取决于第一个的值。在这种情况下，“问题”在于第一个中某个值的选项与第一个具有另一个值时给出的选项不同。基本上，我已经创建了一个简单的fiddle来向您展示示例和问题：https://codesandbox.io/s/select-autochange-7bfj6，请打开控制台查看我所说的内容。因此，基本上，在开始时选择了“保时捷”和“911”。然后，如果我将“911”更改为“卡宴”，一切都很好。问题出在我将'Porsche'改成'Alfa'时：第二个选择框的值应该是'Giulietta'，但第二个选择框的onChange事件没有被触发。 我基本确定问题是UI和状态之间某种程度的失同步：在状态中，第二个选择框仍然具有'911'的值，但由于第二个选择框中不再提供该选项，因此它会自动选择第一个可能的值.. 但这种自动选择只是“图形”上的。 我知道可以通过在第二个选择框中添加一个“null”值来解决这个问题，例如：<option value={''} label={'Select a Model'} />。但是我希望在第一个选择框更改时仍然保持自动选择。 编辑：实际上，我提出的修复方法并不是真正的修复：那个“选择模型”的选项具有值''，但handleSelectSelectChange仍然没有被触发，所以虽然UI选择的值为''，但状态仍然具有'911'。

- Jolly

Answer 1

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

- 欧阳斌

---

谢谢！我考虑了一下，确信这个方法可行。不过，我在想是否存在一种解决方案，可以保持所选值和UI所选值之间的同步。我的意思是，如果明天我遇到类似的情况，我将需要编写类似的useEffect来解决问题。 - Jolly

https://codesandbox.io/s/select-autochange-forked-e284j?file=/src/App.tsx - 欧阳斌

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

- Majid M.