如何将defaultOption添加到AsyncSelect？

Question

我正在为我的组件使用异步反应选择，但无法解决默认选项的问题。文档无法帮助我，因为没有与我的问题相关的示例。

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 属性确定您的远程请求最初被触发的“时间”。该属性有两个有效值。向此道具提供选项数组将填充打开选择时使用的初始选项集，此时远程加载仅在过滤选项（在控件中键入）时发生。单独提供 prop（或使用“true”）告诉控件立即触发由 loadOptions 描述的远程请求，以获取 Select 的初始值。

当我们使用它时，我只能在下拉菜单中获得默认选项，如下所示`

但我的目标是获得像这张照片这样的组件`

Answer 1

我认为实现您想要的结果的最佳方法是向任何 campaignToOption返回添加自定义选项。

例如，您可以使用此方法将特殊选项附加到数组：

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

保持defaultOptions为 True（不是数组）。

这是您的场景的简化版本，但我希望它有所帮助：