React组件无渲染无报错：GitHub用户列表获取代码异常

问题根源分析 #

你的组件存在两个核心问题：

• 状态更新方式错误：使用curruser.push(users)原地修改状态数组，React无法检测到状态引用变化，不会触发组件重渲染；且GitHub API返回的本身就是用户数组，不需要嵌套进原状态数组。
• 嵌套map缺少返回值：外层user.map中，内部的pep.map未被return，导致外层map遍历后没有生成任何JSX元素。

修正后的代码 #

import { useState, useEffect } from 'react'

const url = 'https://api.github.com/users'

const FetchData = () => {
  const [users, setUsers] = useState([])
  const getData = async () => {
    try {
      const response = await fetch(url)
      const fetchedUsers = await response.json()
      // 直接赋值获取到的用户数组，无需嵌套
      setUsers(fetchedUsers)
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    getData()
  }, [])

  return (
    <ol>
      {/* 直接遍历用户数组，无需嵌套map */}
      {users.map((person) => {
        const { login, html_url, avatar_url, id } = person
        return (
          <li key={id}>
            <img src={avatar_url} title="用户头像" alt={`${login}的头像`} />
            <h1>{login}</h1>
            <a href={html_url}>访问GitHub主页</a>
          </li>
        )
      })}
    </ol>
  )
}
export default FetchData

关键修改点说明 #

• 状态更新：删除嵌套数组操作，直接将API返回的用户数组赋值给状态users，确保状态引用变化触发重渲染。
• JSX渲染：移除多余的嵌套map，直接遍历users数组生成列表项；将原ul改为li，符合HTML语义（ol的直接子元素应为li），同时补充alt属性优化图片可访问性。
• 变量命名：将user改为users、changeUser改为setUsers，贴合React状态命名的常规习惯，提升代码可读性。

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