如何将defaultOption添加到AsyncSelect？

Question

我正在为我的组件使用异步react-select，但是无法解决默认Options的问题。文件无法帮助我，因为没有这样一个与我的问题有关的例子。

const campaignToOption = campaign => ({value: campaign.id, label: campaign.name});

const loadOptionsWrapper = fetchAll =>
    input => fetchAll({
        _limit: 10000,
        q: input,
        _sort: 'name',
        _order: 'asc',
    }).then(campaigns => _(campaigns).reject('meta').map(campaignToOption).values());

const defaultProps = {
    options: [],
    placeholder: 'Campaign: Not selected',
};

const CampaignFilter = props => {
    return <Async
        defaultOptions={[{label: 'All Campaigns', value: '-2', group: true}]}
        loadOptions={loadOptionsWrapper(props?.actions?.fetchAllCampaigns)}
        {...defaultProps}
        {...props}
    />;
};

export default CampaignFilter;

我想添加一个选项，该选项将允许用户选择所有选项。因此，在AsyncSelect的情况下，选项将异步加载。医生说我们可以使用defaultOptions。

  

defaultOptions属性确定“何时”您的远程请求是   最初被解雇了。此属性有两个有效值。   为该道具提供一个选项数组将填充初始集合   打开选择时使用的选项集，此时遥控器   仅在过滤选项时（控件中的键入）才会发生加载。   单独提供道具（或提供“ true”）会告诉控件   立即触发您的loadOptions描述的远程请求，以   获取选择的那些初始值。

当我们使用它时，我只会在下拉菜单中看到该默认选项，就像这样

但是我的目标是要获得如图所示的组件'

Answer 1

我认为，达到预期效果的最佳方法是在campaignToOption返回的内容中添加自定义选项。

例如，您可以使用此方法向数组添加特殊选项：

const appendSpecialOption = filteredOptions => {
  return [
    { label: "All Campaigns", value: "-2", group: true },
    ...filteredOptions
  ];
};

将defaultOptions保留为True（不是数组）。

这是您的方案的简化版本，但希望对您有所帮助：