在下拉框中選擇時不顯示選項值

Question

我正在嘗試解決我無法解決的問題。 問題是我有一個帶有選擇標簽的下拉框，其中包含一些菜單項。 當我單擊其中一個菜單項時，該值沒有出現在選擇框中，它只是空的。 但是，當我控制台記錄所選項目時，我可以看到我正在選擇哪個菜單項。 代碼如下：

<Select labelId="demo-simple-select-label" id="demo-simple-select" value={selectedMake} onChange={handleMake}>
              {console.log(makes)}
              {makes &&
                makes.map((select, key) => (
                  <MenuItem key={key} value={select}>
                      {console.log(select)}
                    {select.name}
                  </MenuItem>
                ))}
            </Select>

如果你想知道什么是“makes”，它就是這樣的：

(3) [{…}, {…}, {…}]
0: {name: "Honda", id: "5de9c553bce4b703a335c204"}
1: {name: "Toyota", id: "5e4dfbee2d445b7525414c1f"}
2: {name: "Suzuki", id: "5e4e00732d445b7525414c46"}

我不確定為什么選擇本田時，例如它沒有顯示在框中。 我認為這可能與id有關。 請讓我知道如何解決這個問題。

這也是 handleMake 函數，它是從另一個文件作為 prop 傳入的函數：

handleMake = (event) => {
    this.setState({
      selectedMake: event.target.value.name,
      selectedMakeId: event.target.value.id,
    });
  };

Answer 1

問題

對象不能是選擇選項的值，它必須是非對象值。 在您中，您將選項值設置為整個“make object, but setting the Select value to *just* the make's object, but setting the value to *just* the make's name` 屬性，這將永遠不會匹配。

handleMake = (event) => {
  this.setState({
    selectedMake: event.target.value.name, // <-- make's name
    selectedMakeId: event.target.value.id,
  });
};

...

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={selectedMake} // <-- only a make's name
  onChange={handleMake}
>
  {makes.map((select, key) => (
    <MenuItem key={key} value={select}> // <-- entire make object!
      {select.name}
    </MenuItem>
  ))}
</Select>

解決方案

我建議將選定的索引或id存儲在 state 中。

無需將如此多的數據復制到 state 中，因為您可以輕松地從存儲的數組索引或使用 id 搜索得出汽車品牌和 id。 如果從化妝的一個使用的數據對象，那么你就需要搜索makes陣列中的每個時間（ O(n)線性時間）找到一個匹配，但通過使用索引，你可以得到的只是在需要的化妝對象O(1)恆定時間。

handleMake = (event) => {
  this.setState({
    selectedMake: event.target.value,
  });
};

...

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={this.state.selectedMake} // <-- value is "index"
  onChange={this.handleMake}
>
  {makes.map((make, index) => (
    <MenuItem key={index} value={index}> // <-- pass index as "value"
      {make.name}
    </MenuItem>
  ))}
</Select>

要處理使用selectedMake ，例如，如果selectedMake === 0 ：

makes[selectedMake] // { name: "Honda", id: "5de9c553bce4b703a335c204"}

示例組件

function App() {
  const [selectedMake, setSelectedMake] = useState(-1);

  const changeHandler = (e) => setSelectedMake(e.target.value);

  useEffect(() => {
    console.log(selectedMake, makes[selectedMake]);
  }, [selectedMake]);

  return (
    <div className="App">
      <select value={selectedMake} onChange={changeHandler}>
        <option disabled value={-1}>
          Make
        </option>
        {makes.map((make, i) => (
          <option key={make.id} value={i}>
            {make.name}
          </option>
        ))}
      </select>
    </div>
  );
}