ReactJs调用TFL Tube API报错：Cannot read property 'map' of undefined

这个报错是React开发里很常见的问题，核心原因是你尝试对一个**未定义（undefined）**的值调用map方法——要么是存储数据的状态变量初始值没设对，要么是API请求还在处理中、数据还没返回就开始渲染了。下面是一步步的解决方案：

1. 给状态变量设置正确的初始值 #

在函数组件里，务必把存储Tube数据的状态初始化为空数组，而不是默认的undefined。这样即使API还没返回数据，map也能在空数组上安全执行，不会触发报错：

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

function Frame() {
  // 关键：初始值设为空数组[]，避免undefined
  const [tubeLines, setTubeLines] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 2. 在useEffect中发起API请求
  useEffect(() => {
    const fetchTubeData = async () => {
      try {
        // 替换为你实际使用的TFL Tube API端点
        const response = await axios.get('https://api.tfl.gov.uk/Line/Mode/tube/Status');
        // 确认TFL API的响应结构：它直接返回线路数组，所以直接赋值即可
        setTubeLines(response.data);
        setError(null);
      } catch (err) {
        setError('获取地铁数据失败，请稍后重试');
        console.error('请求出错：', err);
      } finally {
        setLoading(false);
      }
    };

    fetchTubeData();
  }, []);

  // 3. 渲染时处理不同状态：加载中、错误、数据就绪
  if (loading) {
    return <div>正在加载地铁数据...</div>;
  }

  if (error) {
    return <div className="error">{error}</div>;
  }

  return (
    <ul>
      {/* 现在tubeLines是数组，map可以安全执行，记得添加唯一key */}
      {tubeLines.map(line => (
        <li key={line.id}>
          <strong>{line.name}</strong>: {line.lineStatuses[0].statusSeverityDescription}
        </li>
      ))}
    </ul>
  );
}

export default Frame;

额外需要检查的细节 #

• API响应结构：确认你从axios响应中提取的是正确的数据层级。如果你的API返回的是包裹在对象里的数组（比如response.data.lines），一定要调整setTubeLines的参数，不然会把整个响应对象赋值，导致后续map依然报错。
• 异步请求时机：确保API请求是在useEffect中发起的，并且依赖项数组为空（只在组件挂载时请求一次），避免重复请求或者请求时机错误。
• key属性：给每个<li>元素加上唯一的key（比如线路的id），这是React列表渲染的要求，也能避免潜在的渲染异常。

这样调整后，你的组件就能在数据未就绪时显示加载提示，请求失败时展示错误信息，数据返回后正常遍历渲染内容了。

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