即时设置 Select 的默认值

Question

我正在尝试遵循此示例： https://react-select.com/home

我定义了以下两个数组：

const [selectedAccountTypes, setSelectedAccountTypes] = useState([]);
const [allAccountTypes, setAllAccountTypes] = useState([]);

当用户单击按钮时，我在以下函数中设置值：

const onAccountChanged = async (val) => {
console.log(val); 
setSearchedAccount(val);

console.log('onAccountChanged'); 
console.log(searchedAccountValue); 

const accounts = await getAccountTypeLookupList();

var options = accounts.data.map((o) => ({
  label: o.name,
  value: o.id,
  number: o.accountNumber
}))   
console.log(options); 

setAllAccountTypes(options);
setSelectedAccountTypes(options);

console.log(options);
console.log(setSelectedAccountTypes);

return options;
};

我的组件：

<Select
placeholder='First select account above'
isMulti
cacheOptions
defaultValue ={selectedAccountTypes}  
options={allAccountTypes}/>

我希望在这种情况下全部被选中，但没有默认选中任何内容。我错过了什么吗？

Answer 1

将值设置为 selectedAccountTypes，然后 onChange 调用 setSelectedAccountTypes 来更新它。

Answer 2

问题是时机。在我设置选定值时，控件尚未完成控件的渲染。我最终在数组上创建了一个 useEffect，并在其中设置了默认选择。

即时设置 Select 的默认值

Setting defaultValues on the fly for Select

reactjs

react-select