Antd Select 搜索后显示“No Data”但选项已正确填充的问题求助

我查阅了Stack Overflow上的多个相关问题仍未解决，比如Antd Select Search Box not rendering the matches相关问题。

相关代码 #

const AutoCompleteMultiple = ({
    onSelect,
    placeholder,
    filter,
    width = '100%',
    ...rest
}) => {
    const [loadMembers, { loading, data }] = useLazyQuery(withGroupsQuery);

    const variables = {...};

    const options = data ? parseMembers(data) : [];

    console.log(options);

    return (
        <StyledSelect
            mode="multiple"
            // labelInValue
            filterOptions={false}

            style={{ width: '100%' }}
            placeholder={placeholder}
            onFocus={() =>
                loadMembers({
                    variables: {
                        search: '',
                        ...variables,
                    },
                })
            }
            onSearch={search =>
                loadMembers({
                    variables: {
                        search,
                        ...variables,
                    },
                })
            }
            onSelect={(selected, option) => {
                if (onSelect) {
                    onSelect(selected, option.label, option.group);
                } else {
                    console.info(
                        'SelectMultipleGroupOrUserField – onSelect',
                        selected,
                        option
                    );
                }
            }}
            // notFoundContent: loading ? <Spin size="small" /> : 'Inga resultat',
            loading={loading}
        >
            {(options &&
                options.map(item => (
                    <Select.Option value={item.value} key={item.value}>{item.label}</Select.Option>
                ))) ||
                []}
        </StyledSelect>
    );
};

问题现象 #

控制台日志显示，onFocus触发时已成功加载对应数据项，触发搜索时会先返回一次undefined，之后可拿到搜索后的正确数据，但无论options是否更新，组件重渲染后始终显示“No data”。

• 修正错误的属性名：你代码中使用的filterOptions是错误属性名，antd Select 关闭本地过滤的属性是单数形式filterOption，属性名写错会导致配置不生效，Select默认会根据输入内容本地过滤远程返回的选项，未命中过滤规则的选项会被全部剔除，最终显示无数据。修改如下：

<StyledSelect
  mode="multiple"
  filterOption={false} // 把filterOptions改成filterOption
  // 其余原有属性不变
>

• 优化选项渲染逻辑：去掉冗余的空值判断写法，改用可选链语法避免渲染异常：

{options?.map(item => (
  <Select.Option value={item.value} key={item.value}>
    {item.label}
  </Select.Option>
))}

• 显式配置空状态展示：取消注释notFoundContent配置，区分加载状态和空结果状态，避免加载过程中误显示无数据提示：

notFoundContent={loading ? <Spin size="small" /> : '无匹配结果'}

• 排查封装组件问题：如果以上修改后仍未生效，临时将StyledSelect替换为antd原生Select测试，如果原生组件可正常展示选项，说明你封装的StyledSelect存在属性透传、children缓存等问题，可针对性排查是否使用了React.memo但未将options加入依赖、是否拦截了children渲染逻辑。
• 校验选项值唯一性：确认options中每个元素的value是唯一值，重复的value会导致React渲染时出现diff异常，出现选项丢失问题。

内容的提问来源于stack exchange，提问作者Cookie