如何在ReactJS中基于API响应渲染下拉选择框

你的代码存在几个关键问题，导致无法成功获取数据并渲染到下拉框中，下面是修正后的完整代码及问题说明：

修正后的代码 #

import React, { useEffect, useState } from "react";
import axios from "axios";

const getProjects = (setProjects) => {
    axios.get('https://mock-api.binaryboxtuts.com/api/projects', {
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token')
        }
    })
    .then((res) => {
        setProjects(res.data);
    })
    .catch((ex) => {
        console.error('获取项目列表失败:', ex);
    })
}

const Dropdown = () => {
    
    const [projects, setProjects] = useState([])    

    useEffect(() => {
        getProjects(setProjects);
    }, [])

    return(
        <div>
            <label htmlFor="project-select">项目名称</label>
            <select id="project-select">
                <option value="">请选择项目</option>
                {projects.map(project => {
                    return <option key={project.id} value={project.id}>{project.name}</option>
                })}
            </select>                       
        </div>
    )
}

export default Dropdown

关键问题修正点 #

• API地址补全：原请求仅写了/api/projects，axios会默认使用当前页面域名，需补全完整基础域名https://mock-api.binaryboxtuts.com
• 请求头拼写修正：axios配置中请求头字段是headers（复数），原代码写为header会导致Authorization头无法正确携带
• 状态更新逻辑补充：原getProjects函数未调用setProjects更新组件状态，拿到数据后无法传递到组件中；同时原函数未返回Promise，也无法在外部处理结果
• useEffect依赖项优化：添加空数组依赖项，确保请求只在组件挂载时执行一次，避免重复请求
• 表单关联修复：label的htmlFor与select的id统一为project-select，提升页面可访问性
• 空状态处理：添加默认空选项，避免数据加载完成前下拉框无内容可选

注意：如果localStorage中没有存储有效的token，请求可能返回权限错误，请先确认token已正确存入。

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