React类组件调用API时报Cannot read properties of undefined (reading 'map')如何解决

核心报错根因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'map') 来源于三个可优化点：

• 类组件自定义方法没有绑定this，导致方法内部this指向异常，接口请求逻辑执行出错
• 调用data.Accounts.map前没有校验Accounts字段是否存在、是否为数组，若接口返回异常、结构变动时就会触发该报错
• state初始化时未声明users字段，首次渲染时this.state.users为undefined，也会埋下渲染隐患

修复步骤 #

1. 修正类方法this指向 #

类组件的自定义方法默认不会绑定组件实例this，要么在constructor中手动bind，要么直接将方法定义为箭头函数继承外层this。

2. 增加接口返回数据的空值校验 #

调用map前先判断目标字段是否为数组，也可以用可选链语法简化校验逻辑。

3. 优化state结构（可选但推荐） #

不要直接在接口请求回调中拼接JSX存入state，建议先存原始接口数据，在render函数中再做渲染逻辑处理，后续要改表格结构的时候更灵活。

修复后完整代码 #

import React, {Component} from 'react'
import axios from '../../axios'

export default class Users extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // 初始化声明users字段，默认空数组
            users: []    
        };
    }
    // 改成箭头函数，自动绑定this指向组件实例
    getUsersData = () => {
        axios
            .post(`/`, { ParentId: 'ou-wmno-yeeol4ok' })
            .then(res => {
                const data = res.data;
                // 先校验Accounts是不是数组，避免map报错
                if (Array.isArray(data.Accounts)) {
                    // 这里直接存原始数据，后续渲染更灵活
                    this.setState({ users: data.Accounts })
                }
            })
            .catch((error) => {
                console.log(error)
            })
    }
    componentDidMount(){
        this.getUsersData()
    }
    
    render() {
         return (
            <div>
                {/* 渲染动态表格 */}
                <table border={1} cellPadding={8} cellSpacing={0}>
                    <thead>
                        <tr>
                            <th>账号ID</th>
                            <th>账号名称</th>
                            <th>邮箱</th>
                            <th>状态</th>
                            <th>加入时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.users.map(u => (
                            <tr key={u.Id}>
                                <td>{u.Id}</td>
                                <td>{u.Name}</td>
                                <td>{u.Email}</td>
                                <td>{u.Status}</td>
                                <td>{u.JoinedTimestamp}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        )
    }
}

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