React select渲染异常 显示多个选择框而非单一下拉选项如何解决

两次写法的错误点非常明确：

• 第一版代码仅渲染了1个<option>标签，直接将拆分得到的数组作为内容传入，React会自动把数组项拼接为纯文本渲染，最终所有地点被合并到同一个选项中。
• 第二版代码把<select>标签放在了数组遍历的map方法内部，每遍历一个地点就会生成一个独立的下拉选择框，才会出现多个选择框并排的异常效果。

只需要保留唯一的<select>父标签，将遍历逻辑移动到<select>标签内部，仅循环生成<option>子元素即可。同时建议拆分字符串时增加空值兜底、空字符串过滤逻辑，避免原始数据为空或首尾/中间存在多余逗号时渲染出空白选项。

基础可用代码：

// 数据预处理：空值兜底 + 过滤拆分后产生的空项
const placeList = settings?.places?.split(',').filter(item => item.trim()) || []

return (
  <select>
    {/* 仅循环生成option子项 */}
    {placeList.map((site, idx) => {
      const currentSite = site.trim()
      return <option key={idx} value={currentSite}>{currentSite}</option>
    })}
  </select>
)

如果需要做选中状态受控、增加默认提示项，可以参考以下扩展写法：

import { useState } from 'react'

// 数据预处理
const placeList = settings?.places?.split(',').filter(item => item.trim()) || []
const [selectedPlace, setSelectedPlace] = useState('')

return (
  <select
    value={selectedPlace}
    onChange={(e) => setSelectedPlace(e.target.value)}
  >
    {/* 默认提示选项 */}
    <option value="" disabled>请选择目标地点</option>
    {placeList.map((site, idx) => {
      const currentSite = site.trim()
      return <option key={idx} value={currentSite}>{currentSite}</option>
    })}
  </select>
)

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