即使在重新加载选项后，下拉菜单的选定值仍然存在

Question

我将描述一个我无法修复的错误。

我正在使用这个select/dropdown。

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

场景 1：按下插入按钮时，我们看到插入了旧的 'value'。不好！

场景 2：用户单击下拉菜单，select选择另一个选项。当按下插入按钮时，我们看到使用了新的 'value'。好

场景 3：用户单击下拉菜单但没有 select 新选项。通过再次单击下拉菜单关闭菜单。使用旧 'value'。不好！

场景 4：用户单击下拉菜单。 select再次选择选项 1。现在使用新的 'value'。

那么，我该如何解决这个问题？

// 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 属性并使用 useState 提供默认值。下面提供了示例。

// 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>

即使在重新加载选项后，下拉菜单的选定值仍然存在

Selected value of dropdown persists even after reloading options

reactjs

react-select