React中Axios API调用数据不显示，报map读取未定义属性错误

错误核心原因 #

这个报错的本质是你尝试对一个undefined的值调用map方法。API请求是异步操作，组件首次渲染时请求还未完成，此时你用来渲染表格的数据源还是初始的undefined，直接执行map就会触发该错误。

针对性解决步骤 #

1. 初始化数据源为数组 #

在存储API返回数据的组件（通常是App.js）中，将状态初始值设为空数组，而非undefined：

// App.js 状态初始化示例
const [coins, setCoins] = useState([]);

2. 渲染前做数据有效性判断 #

在需要遍历数据渲染表格的位置，先确认数据存在再执行map，可以用条件渲染或可选链操作符：

// 方式1：条件渲染
{coins.length > 0 ? (
  coins.map(coin => <CoinItem key={coin.id} coin={coin} />)
) : (
  <p>数据加载中...</p>
)}

// 方式2：可选链简化写法
{coins?.map(coin => <CoinItem key={coin.id} coin={coin} />)}

3. 校验Axios请求逻辑 #

确认Axios请求是否正确获取并更新数据，可先打印响应结果验证结构：

// App.js 中Axios请求示例
useEffect(() => {
  axios.get('目标API地址')
    .then(res => {
      console.log(res.data); // 控制台打印确认数据结构
      setCoins(res.data); // 确保传入正确的字段（部分API数据嵌套在res.data.data中）
    })
    .catch(err => console.error('请求失败:', err));
}, []);

4. 检查组件数据传递 #

确保父组件正确向CoinItem.jsx传递数据，同时子组件正确接收props：

// 父组件传递数据
<CoinItem coin={coin} />

// CoinItem.jsx 接收props
function CoinItem({ coin }) {
  // 可打印coin确认是否拿到数据
  return (
    <tr>
      <td>{coin.name}</td>
      <td>{coin.price}</td>
      {/* 其他表格列逻辑 */}
    </tr>
  );
}

实用调试技巧 #

• 用console.log在关键节点打印数据：比如请求完成后打印响应值、组件渲染前打印数据源，确认数据是否存在、结构是否符合预期。
• 查看浏览器Network面板：确认API请求状态码为200，响应数据格式正确。

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