從語義 ui react 下拉列表中選擇的值在選擇時不出現

Question

一旦選中，我無法從下拉列表中獲取選定的值以在下拉列表中呈現。 正在設置正確的值（通過控制台查看）但未顯示在實際下拉列表中

    const onSlotIdChange = (e, data) => {
      console.log(props);
      console.log("slotId fired, value ---> ", data.value);
      props.setFieldValue("slotId", data.value);
    };

實際組件在這里

  <Dropdown
    id="slotId"
    value={slotId}
    onChange={onSlotIdChange}
    options={slotIds.map(id => {
      return {
        key: id.id,
        text: id.id,
        value: id.id
      };
    })}
  />

我遇到了一個完全像這樣的問題，之前的解決方案是使用類似props.setFieldValue("slotId", e.currentTarget.textContent);類的東西props.setFieldValue("slotId", e.currentTarget.textContent); 但我已經試過了，在這種情況下它不起作用。 <Dropdown>組件來自 Semantic ui react

我這里有一個代碼箱。 進入啟動頁面后，通過頂部的按鈕轉到Login頁面。 從無線電組中選擇Slot Sec officer ，它將呈現 3 個下拉列表，第二個和第三個下拉列表（ slotId和deviceId ）是我遇到問題的地方。 如果您拉起控制台並進行選擇，則該值將正確設置，但一旦選擇該值，該值就不會出現在下拉列表中。

下拉菜單的代碼位於getSlotIds和getDeviceIds類中。 並且onChange方法在FormikLoginForm類中

Answer 1

這是因為您沒有在用戶選擇值后設置狀態，就像您在“插槽安全員角色”中所做的那樣（這是正確的，請參閱代碼和框中的第 246 行）。
例如，要修復“設備 ID”下拉列表，在第 258 行之后，我將此代碼放在第 259 行：

this.setState({deviceId: data.value});

它有效。 在第 253 行之后，對 slotId 也需要做同樣的事情：

this.setState({slotId: data.value});