React中Fetch获取数据后无法渲染下拉列表的问题排查

问题核心原因 #

你的代码里**users.map的回调函数没有返回<option>元素**，这是导致下拉列表为空的直接原因。React需要map回调返回JSX元素才能完成渲染，你当前只是在回调内部创建了元素但未返回。

另外，useEffect末尾的console.log打印出“获取到的数据”是视觉错觉——setUsers是异步更新状态的，那行代码执行时users还是初始的空数组，你看到的“数据”应该是状态更新后组件重新渲染时的日志输出。

修复步骤 #

1. 给map回调添加返回值
   可以用箭头函数隐式返回（去掉大括号改用小括号），或者显式写return：

   // 隐式返回推荐写法
   users.map((user, index) => (
       <option key={index}>{user.username}</option>
   ))
   
   // 显式返回写法
   users.map((user, index) => {
       return <option key={index}>{user.username}</option>
   })
   

2. 完善useEffect的依赖数组
   你的useEffect用到了authToken和logout，这些变量必须加入依赖数组，避免闭包捕获旧值导致的请求异常：

   useEffect(() => {
       // 原有getUsers逻辑
   }, [authToken, logout])
   

3. 优化key值（可选但推荐）
   尽量避免用index作为key，如果user对象有唯一标识（比如id），改用该值能提升列表渲染的稳定性：

   <option key={user.id}>{user.username}</option>
   

完整修复后的代码 #

export default function NewChannel() {
    let { authToken, user, logout } = useContext(AuthContext)
    let [users, setUsers] = useState([])

    useEffect(() => {
        const getUsers = async () => {
            try {
                const response = await fetch(`http://127.0.0.1:8000/user/user`, {
                    method: "GET",
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + String(authToken.access)
                    },
                })
                const data = await response.json()
                if (response.status === 200) {
                    setUsers(data)
                } else {
                    alert('You have been logged out')
                    logout()
                }
            } catch (err) {
                console.error('获取用户列表失败:', err)
            }
        }
        getUsers()
    }, [authToken, logout])

    return (
        <div>
            <div className='new-channel-form'>
                <select>
                    {users.map((user, index) => (
                        <option key={index}>{user.username}</option>
                    ))}
                </select>
                <input className="submit-button" type="submit" />
            </div>
        </div>
    )
}

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