React Aria Combobox输入过滤失效问题求助

问题根源 #

你的Combobox无法过滤选项，核心原因是未配置getItemText属性：React Aria无法自动识别自定义选项对象中的文本字段（你的选项用label存储文本），导致过滤逻辑无法将输入内容与选项文本做匹配，最终state.collection不会更新，始终展示全部选项。

修复步骤 #

1. 给ComboBox添加文本提取逻辑

在Autocomplete组件中，为ComboBox传入getItemText属性，指定从选项对象中提取过滤用文本的规则：

export const Autocomplete = ({
  options,
  isLoading,
  isDisabled
}: AutocompleteProps) => {
  return (
    <div>
      <ComboBox 
        items={options} 
        isDisabled={isDisabled}
        getItemText={(item) => item.label} {/* 告诉React Aria用label字段做过滤匹配 */}
      >
        {(item) => (
          <Item textValue={item.label} key={item.label}>
            <p>{item.label}</p>
          </Item>
        )}
      </ComboBox>
    </div>
  );
};

2. 确保钩子传递完整配置

你的useComboBox钩子已经通过...props将参数传递给useComboBoxState和useAriaComboBox，添加getItemText后会自动生效，无需修改钩子内部代码。

验证修复 #

完成上述修改后，输入内容（例如PHP）时，state.collection.keyMap会自动更新为匹配的选项，Listbox也只会展示符合过滤条件的条目。

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