React Native RNPickerSelect移除下拉空值并自动选中首项

问题根因 #

下拉列表顶部残留可选中空项、默认显示「Select item」提示是两个配置错误共同导致的：

• 给placeholder传空对象{}不会覆盖组件内置默认配置，RNPickerSelect内置默认占位项为{ label: 'Select item...', value: null }，会默认渲染在选项列表最顶部。
• 组件初始化时绑定的dropdownValue没有匹配到items数组内的有效选项值（初始值为undefined、null或空字符串），组件会自动选中顶部的空占位项。

修复步骤 #

• 初始化选中状态：组件加载、选项列表types赋值完成后，自动将dropdownValue设置为列表第一个选项的value，确保绑定值始终匹配有效选项。
• 显式覆盖placeholder配置：不要传空对象，手动将placeholder的label设为空字符串，避免显示默认提示文本。
• 增加空值过滤：onValueChange回调中过滤空值选中逻辑，避免用户误选隐藏的空占位项。

修正后代码 #

Props接口定义 #

interface AutoSuggestProps {
  types: IRequest[];
  onSelect: (item: string) => void;
  disabled: boolean;
  placeholderLabel: string;
  title: string;
  dropdownValue: string;
  setDropDownValue: (val: string) => void;
}

下拉组件核心实现 #

export const DropdownList = ({
  types, // 修正原代码参数解构不匹配问题：原代码写了currencyType，和接口定义的types字段对齐
  onSelect,
  disabled,
  placeholderLabel,
  title,
  dropdownValue,
  setDropDownValue,
}: AutoSuggestProps): JSX.Element => {
  // 异步加载选项时，自动选中第一个有效项
  React.useEffect(() => {
    if (types?.length > 0 && !dropdownValue) {
      const firstItemValue = types[0].value;
      setDropDownValue(firstItemValue);
      onSelect(firstItemValue);
    }
  }, [types, dropdownValue, setDropDownValue, onSelect]);

  return (
    <View>
      <RNPickerSelect
        disabled={disabled}
        value={dropdownValue}
        onValueChange={el => {
          // 过滤空值选中事件
          if (el !== null && el !== '') {
            setDropDownValue(el);
            onSelect(el);
          }
        }}
        // 显式覆盖默认placeholder，空label不显示提示文本
        placeholder={{value: null, label: ''}}
        items={types}
        useNativeAndroidPickerStyle={false}
        Icon={() => {
          return <DropdownArrowSVG_noFill width={(width + height) / 50} height={(width + height) / 50} fill={dropdownColor} />;
        }}
      />
    </View>
  )
}

补充说明 #

• 如果types是本地固定的同步数组，可以直接在父组件初始化dropdownValue状态时赋值为types[0].value，不需要额外写useEffect监听。
• 不要给placeholder配置和下拉选项重复的value，否则会导致选项重复渲染。

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