如何使用API获取的仓库数据填充React应用中的dropdown下拉框

问题原因 #

你将<select>标签写在了repos.map的循环体内部，每遍历一个仓库就会生成一个完整的下拉框，这是功能异常的核心原因。

修正后的代码 #

if (!repos || repos.length === 0) return <p>No repos, sorry</p>;
return (
    <div>
        <h2 className='list-head'>Available Public Repositories</h2>
        <select>
            {repos.map((repo) => {
                return <option key={repo.id} value={repo.name}>{repo.name}</option>
            })}
        </select>
    </div>
);

调整说明 #

• 把<select>标签移到map循环外部，全局仅生成一个下拉框，循环内部仅生成<option>选项
• 给循环生成的<option>添加唯一的key属性（推荐用仓库对应的id字段），符合React的列表渲染要求，避免控制台报错
• 给<option>补充了value属性，方便后续逻辑中获取用户选中的仓库值
• 原代码中用<ul>包裹下拉框语义不匹配，替换为了普通<div>容器，你可以根据自己的布局需求自行调整容器类型

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