如何解决React中undefined的map属性TypeError报错

Uncaught TypeError: Cannot read properties of undefined (reading 'map') 报错来自两个核心逻辑错误：

• axios响应取值路径错误：axios封装的响应对象中，接口返回的业务数据统一存放在res.data字段下，直接读取res.array拿到的永远是undefined，将undefined赋值给state中的tableData后，调用数组方法map就会直接抛错。
• 缺少异常兜底逻辑：没有处理接口请求失败、返回字段不符合预期的场景，一旦接口报错就会导致tableData值异常，直接引发渲染崩溃。

按以下几点调整代码即可解决问题：

• 修正axios取值逻辑，从res.data下读取接口返回的业务数据，再取需要的数组字段
• 增加请求catch捕获，请求异常时将tableData重置为空数组
• 渲染前增加类型判断，确认tableData是数组类型后再调用map，做双重兜底
• 列表渲染项补充唯一key属性，符合React渲染要求，避免控制台警告
• 读取深层嵌套字段时增加空值判断，避免单条数据字段缺失引发新的报错

修复后的完整可运行代码：

import React from 'react';
import axios from 'axios';
import { Grid, Box } from '@mui/material';

class TableGen extends React.Component {
  constructor() {
    super();
    this.state = {
      tableData: [],
    };
  }
  componentDidMount() {
    axios
      .post(
        'https://us-central1-stockmarketcharting-8c469.cloudfunctions.net/server/performance/getbest'
      )
      .then((res) => {
        // 可先打印res确认接口实际返回结构，调整取值路径
        const resData = res.data;
        this.setState({ 
          tableData: Array.isArray(resData.array) ? resData.array : [] 
        });
      })
      .catch((err) => {
        console.error('数据请求失败：', err);
        this.setState({ tableData: [] });
      });
  }

  render() {
    const { tableData } = this.state;
    return (
      <div>
        {Array.isArray(tableData) && tableData.map((row, idx) => (
          <Grid key={row.id || idx} item sm={6}>
            {row?.data?.price}
          </Grid>
        ))}
      </div>
    );
  }
}
export default TableGen;

调试提示：如果修改后还是拿不到数据，在then回调里打印res，看接口实际返回的数组字段是在res.data根路径，还是嵌套在其他字段下，对应调整取值路径即可。

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