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

Question

我将描述一个我在修复时遇到问题的错误。

我正在使用此选择/下拉列表。

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

场景 1：按下插入按钮时，我们看到插入了旧的"值"。坏！

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

方案 3：用户单击下拉列表，但不选择新选项。通过再次单击下拉菜单关闭菜单。使用旧的"值"。坏！

方案 4：用户单击下拉列表。并再次选择选项 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，请使用valueprop 并使用 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>