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

Question

我构建了一个 react 应用程序，我从用户那里获取所有存储库。我试图用返回的项目填充 dropdown，但它不起作用。我只得到它为每个存储库制作一个 dropdown。

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> 标签的每个元素。
因此，您需要做的就是从 map.

中取出 select 标签

我还为 <option> 添加了 key 和 value。您可以根据 repos 数据

中的内容来获取它

        <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>

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

Fill Dropdown with Fetched API Items

api

reactjs

dropdown