如何调试React中axios发起的API请求 解决接口数据不渲染问题

核心问题是你请求的接口返回值为数组类型，并非单个对象，直接读取locations.id无法拿到对应字段值，也不会触发报错。

调试定位步骤 #

• 第一步：在请求回调中增加打印逻辑，确认接口返回结构，打开浏览器控制台就能看到完整的返回数据类型和字段
• 第二步：补充请求错误捕获逻辑，避免请求失败无感知的情况
• 第三步：在组件顶层打印state值，验证数据更新是否正常触发

调试用基础代码示例：

useEffect(() => {
  axios.get(url)
  .then(response => {
    console.log('接口返回数据：', response.data) // 新增调试打印
    setLocations(response.data)
  })
  .catch(err => {
    console.error('请求出错：', err) // 捕获请求错误
  })
}, [url])

代码修正方案 #

方案1：渲染所有返回的地点信息 #

import { useState, useEffect } from 'react'
import axios from 'axios'

function Card() {
    const url = "https://6033c4d8843b15001793194e.mockapi.io/api/locations";
    const [locations, setLocations] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        axios.get(url)
        .then(response => {
            setLocations(response.data)
        })
        .catch(err => {
            setError(err)
        })
    }, [url])

    if(error) {
        return <div><h1>请求出错</h1><p>{error.message}</p></div>
    }

    if(!locations) {
        return <div><h1>加载中...</h1></div>
    }

    return (
        <div>
            <h1>Acme HQ</h1>
            {locations.map(item => (
                <div key={item.id}>
                    <p>地点名称：{item.name}</p>
                    <p>用户数：{item.usercount}</p>
                </div>
            ))}
        </div>
    )
}

方案2：仅渲染第一条数据的信息 #

if(locations && locations.length > 0) {
  const firstItem = locations[0]
  return (
    <div>
      <h1>Acme HQ</h1>
      <p>地点名称：{firstItem.name}</p>
      <p>用户数：{firstItem.usercount}</p>
    </div>
  )
}

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