即使在重新加载选项后，下拉菜单的选定值也会持续存在。

Question

我将描述一个我难以修复的bug。

我正在使用这个 选择下拉.

假设下拉菜单已经被填充，并且选项1已经被选中。用户使用了另一个控件，因此调用了handlePopulate()。在下拉菜单中，'option1'标签仍然可见。

情况1：当插入按钮被按下时，我们看到旧的 "值 "被插入了。糟糕

场景2：用户点击下拉菜单并选择另一个选项。当插入按钮被按下时，我们看到新的 "值 "被使用。很好。

情景3：用户点击下拉菜单，但没有选择新的选项。通过再次点击下拉菜单来关闭菜单，旧的 "值 "被使用。坏的

情景4：用户点击下拉菜单，并再次选择选项1。并再次选择选项1。现在使用了新的 "值"。

那么，我怎样才能解决这个问题呢？

// React Hooks based state
const [insertFields, setInsertFields] = React.useState<FieldData[]>([]);
const [selectedInsertField, setSelectedInsertField] = React.useState<FieldData | undefined>();


// skip

const handlePopulate= async () => {
  // skip
  setInsertFields(newFields)
}

//React element Hierarcy
<Select
  options={insertFields}
  defaultValue={insertFields[0]}
  onChange={handleFieldSelection} // calls setSelectedInsertField(newValue)
/>
// When clicked this butten uses selectedInsertField
<Button .../>Insert</Button>

Answer 1

取而代之的是 defaultValue，使用 value prop，并使用State来提供默认值。示例如下。

// React Hooks based state
const [insertFields, setInsertFields] = React.useState<FieldData[]>([]);

// Provide default value here
const [selectedInsertField, setSelectedInsertField] = React.useState<FieldData | undefined>(insertFields[0]);


// skip

const handlePopulate= async () => {
  // skip
  setInsertFields(newFields)
}





//React element Hierarcy
// Change defaultValue to value
<Select
  options={insertFields}
  value={selectedInsertField}
  onChange={handleFieldSelection} // calls setSelectedInsertField(newValue)
/>
// When clicked this butten uses selectedInsertField
<Button .../>Insert</Button>