React组件中使用fetch API无法日志/映射数据的问题排查

核心错误点： #

• fetch放在组件顶层导致无限重渲染：组件每次渲染都会执行fetch，setRepos更新state后又触发组件重新渲染，形成循环。此时console.log(repos)打印的是当前渲染周期的旧state值（因为React的setState是异步操作）。
• 直接打印Promise对象：fetch返回的是Promise实例，你打印的data是Promise，不是请求返回的实际数据。
• map未返回JSX元素：你在repos.map里只做了console.log，没有返回可渲染的JSX，所以页面不会展示任何内容；而且因为渲染时机问题，这个console.log也可能无法在数据更新后触发。

修正后的代码： #

const Component = () => {
    const [repos, setRepos] = useState([])
    
    useEffect(() => {
        // 将fetch放在useEffect中，空依赖数组确保仅挂载时执行一次
        fetch('https://api.github.com/users/alexspurlock25/repos')
            .then(response => {
                // 先检查响应是否成功
                if (!response.ok) throw new Error('请求失败')
                return response.json()
            })
            .then(data => {
                setRepos(data)
                // 在这里打印数据，确保拿到的是请求返回的结果
                console.log('请求到的仓库数据:', data)
            })
            .catch(err => console.error('请求出错:', err))
    }, [])

    // 这里打印repos会在组件每次渲染时执行，初始是空数组，数据更新后会打印新值
    console.log('当前state中的repos:', repos)

    return (
        <div>
            {repos.map(repo => (
                // 必须返回JSX元素，并且给每个元素加唯一key
                <div key={repo.id}>
                    <h3>{repo.name}</h3>
                    <p>{repo.description || '无描述'}</p>
                </div>
            ))}
        </div>
    )
}

关键说明： #

• useEffect的作用：空依赖数组[]让fetch只在组件首次挂载时执行一次，避免无限重渲染。
• 异步操作的日志位置：要在then回调里打印请求结果，确保拿到的是实际数据；而state的日志可以放在组件顶层，React会在state更新后重新渲染，打印最新值。
• map的正确用法：必须返回可渲染的JSX元素，同时给每个元素添加唯一的key属性（这里用仓库的id），这是React列表渲染的要求。

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