React中从数组渲染<select>下拉列表出现空白项问题求助

问题根源 #

下拉列表显示空白的核心原因有两个：

• 映射数组时错误访问了不存在的属性：ownerIds是字符串数组（['70','71','73']），每个元素是单个字符串值，没有ownerIds属性，{id.ownerIds}会返回undefined，导致选项空白。
• 初始状态ownerIds为null，直接调用map会触发报错，需要先做存在性判断。

修复方案 #

1. 修正映射逻辑 #

把{id.ownerIds}改成{id}，直接渲染数组元素的值，同时增加可选链避免空值报错：

<select>
  {ownerIds?.map((id) => (
    <option key={id}>{id}</option>
  ))}
</select>

• ?.可选链操作符：当ownerIds为null时，不会执行map，避免报错。
• key属性：符合React列表渲染的规范，提升渲染性能。

2. 优化状态初始化（可选） #

将ownerIds的初始状态从null改为空数组[]，可以省略可选链，让代码更简洁：

const [ownerIds, setOwnerIds] = useState([]);

对应的渲染代码：

<select>
  {ownerIds.map((id) => (
    <option key={id}>{id}</option>
  ))}
</select>

3. 优化合约返回值处理（可选） #

如果ownerTokenId是ethers返回的BigNumber数组，直接用toString().split(',')存在潜在风险（比如元素包含逗号时拆分出错），更稳妥的方式是逐个转换为字符串：

setOwnerIds(ownerTokenId.map(tokenId => tokenId.toString()));

验证效果 #

修复后，下拉列表会正确显示70、71、73三个选项，不再出现空白。

内容的提问来源于stack exchange，提问作者ppm.eth