如何在不修改原数组的情况下为React-Select添加前置选项“No Brand”

直接在options属性里通过数组拼接的方式，把"No Brand"选项放在原数组前面，完全不会改动getBrand原数组：

修改后的组件代码：

<Select 
  value={brand} 
  menuPortalTarget={document.body} 
  isSearchable={true} 
  fullWidth 
  placeholder="Search Brand" 
  options={[{ value: null, label: "No Brand" }, ...getBrand]} 
  className="select indent" 
  onChange={handleBrandChange}
/>

细节说明 #

• 这里给"No Brand"设置的value是null，你可以根据业务需求改成空字符串""或者其他标识值
• 使用展开运算符...getBrand会把原数组的所有元素复制到新数组里，原数组getBrand本身不会被修改
• 如果需要在handleBrandChange里处理选中"No Brand"的逻辑，只需要判断返回值的value是否为你设置的标识（比如null）即可

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