React API请求正常但出现map undefined错误，求技术支援

看起来你遇到的是**Cannot read property 'map' of undefined**的经典问题，我帮你分析下原因和解决方案：

核心原因 #

虽然你初始化state.info为空数组，但当API返回的响应里没有results字段，或者请求失败时，this.state.info会被意外设置为undefined，这时候调用map就会触发报错。

一步步解决： #

1. 先确认API返回的数据结构
   在then回调里先打印完整响应，验证是否真的存在results数组：

   .then((response) => {
     console.log('API返回内容:', response); // 打开浏览器控制台查看输出
     const { results } = response;
     // ...后续逻辑
   })
   

   如果控制台里看不到results字段，要么调整解构的字段名，要么和API提供者确认返回结构是否符合预期。

2. 给解构加默认值，兜底空数组
   就算API偶尔不返回results，也强制确保info始终是数组类型：

   .then(({ results = [] }) => this.setState({ info: results }))
   

3. 添加错误捕获，处理请求失败场景
   目前代码没有处理请求失败的情况（比如API宕机、跨域错误），加个catch避免状态异常：

   .catch((err) => {
     console.error('请求航班数据失败:', err);
     // 可选：可以在这里设置错误提示状态，给用户展示友好提示
   })
   

4. render里加空值保护（双重保险）
   就算前面的步骤有疏漏，也确保map不会因为undefined报错：

   let infos = (this.state.info || []).map((item, index) => (
     <div key={index}> {/* 别忘了加key，React列表必须有唯一标识 */}
       <h1>{item.flight?.name}</h1> {/* 用可选链`?.`避免item.flight不存在时报错 */}
     </div>
   ))
   

修改后的完整代码 #

export default class Home extends Component { 
  constructor(props) { 
    super(props); 
    this.state = {info: []}; 
  } 

  componentDidMount() { 
    this.FlightList(); 
  } 

  FlightList() { 
    $.getJSON('api')
      .then((response) => {
        console.log('API返回数据:', response);
        const { results = [] } = response;
        this.setState({ info: results });
      })
      .catch((error) => {
        console.error('获取航班列表失败:', error);
      });
  } 

  render() { 
    let infos = (this.state.info || []).map((item, index) => ( 
      <div key={index}>
        <h1>{item.flight?.name}</h1>
      </div> 
    )); 

    return ( 
      <div id="layout-content" className="layout-content-wrapper"> 
        <div className="panel-list">{ infos }</div> 
      </div> 
    ); 
  } 
}

另外补充两个小细节：

• React列表元素必须加key属性，帮助React高效识别列表项的变化；
• 可选链操作符?.需要React支持ES2020+，或者通过Babel配置兼容，能有效避免嵌套属性不存在时的报错。

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