javascript - 如何将 defaultOption 添加到 AsyncSelect？

Question

我正在为我的组件使用 Async 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 描述，以获取 Select 的初始值。

当我们使用它时，我只会在我的下拉列表中获得该默认选项，就像这样`

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

标签： javascriptreactjsreact-select

Answer 1

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

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

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

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

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