反應選擇默認值設置但未突出顯示

Question

當我在 react-select 組件中設置 defaultValue 時，它被正確識別和設置，但在 select 菜單中沒有突出顯示。

<Select onChange={handleChange} options={options} styles={styles} defaultValue={defaultValue} />

選擇默認值

未在菜單中突出顯示

這是默認值，它是正確的：

{
    "value": {
        "param_user": "TEST"
    },
    "label": "TEST"
}

也許是因為值是 object？

有沒有人有什么建議？

Answer 1

你是對的，問題的出現是因為 react-select 的默認實現檢查選項是否被引用選中。 這意味着如果您的默認選項不是來自選項數組本身，它將不會顯示為選中狀態。 幸運的是，react-select 庫允許您傳入一個判斷選項是否被選中的謂詞。 在你的情況下：

const isOptionSelected = (option, selectValue) => selectValue.some(
  (val) => val.value.param_user === option.value.param_user
);
<Select isOptionSelected={isOptionSelected} onChange={handleChange} options={options} styles={styles} defaultValue={defaultValue} />