时间戳

首页 > 解决方案 > 使用获取的 API 项填充下拉列表

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

问题描述

我已经构建了一个反应应用程序，我在其中从用户那里获取所有存储库。我正在尝试用返回的项目填充下拉列表，但它不起作用。我只是让它为每个存储库创建一个下拉列表。

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>

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

标签： reactjsapidropdown

解决方案

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

我还添加了一个keyand valuefor <option>。您可以根据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>

推荐阅读