如何在React Native下拉组件动态数据前添加静态默认选项？

你只需要把静态默认选项作为数组的第一个元素，和处理后的用户数据合并即可，修改后的dropdownData函数如下：

const dropdownData = () => {
  // 定义静态默认选项
  const defaultOption = { label: '-- Please Select --', value: "" };
  // 过滤并映射用户列表，确保空值时返回空数组
  const processedUsers = userList?.filter(user => user.id != null).map(user => ({
    label: user.username,
    value: user.id
  })) || [];
  // 合并默认选项与处理后的用户数据
  return [defaultOption, ...processedUsers];
};

说明： #

• 单独定义defaultOption让代码结构更清晰，方便后续修改默认提示文本
• 使用|| []处理userList为null或undefined的情况，避免数组展开时出现报错
• 通过数组展开运算符...将默认选项放在最前面，保证下拉框的第一个选项是你需要的提示文本

组件调用代码无需修改，依然保持：

<Dropdown data={ dropdownData() } />

内容的提问来源于stack exchange，提问作者Madame Green Pea