用获取的API项填充下拉列表

Question

我已经构建了一个react应用程序，我从一个用户获取所有的存储库。我正在尝试填充下拉菜单与退回的物品，但它不起作用。我只能让它创建一个下拉列表

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

如何填充下拉列表使用返回的数据?

Answer 1

这是因为您在map函数中有<select>标记。它返回每个带有<select>标签的元素。
因此，您所需要做的就是将select标记从map中取出。

我还为<option>添加了key和value。你可以根据reposdata

中的内容设置

<ul>
<h2 className='list-head'>Available Public Repositories</h2>
<select>
{repos.map((repo) => {
return (<option key={repo.repoId} value={repo.name}>{repo.name}</option> );
})}
<select/>       
</ul>