在React（ASP.NET Core）中获取展示数据时遇'cusList'未定义错误求助

嘿，我来帮你搞定这个错误！这个'cusList' is not defined no-undef的问题主要出在三个地方，咱们一个个理清楚并修复：

问题分析与修复步骤 #

• 状态变量命名不一致：你在constructor里初始化的状态是customers: []，但后续fetch数据时却更新了cusList: data，而且render里直接使用未定义的cusList变量，没有从组件的state中获取。
• render中直接引用未定义变量：<tbody>里的cusList.map需要改为从this.state中读取，即this.state.cusList.map，同时建议添加空值判断避免报错。
• fetch放置位置错误：把fetch请求放在render方法里会导致无限循环——每次状态更新触发render，render里的fetch又会更新状态，再次触发render。应该把数据请求放在componentDidMount生命周期方法中，组件挂载后仅执行一次。

修正后的完整代码 #

import React, { Component } from 'react';
import './Map';

export class FetchCustomer extends Component {
    static displayName = FetchCustomer.Name;

    constructor(props) {
        super(props);
        // 统一状态变量名为cusList，和后续更新保持一致
        this.state = { cusList: [], loading: true };
        // 绑定事件方法的this指向，避免点击时this丢失
        this.handleEdit = this.handleEdit.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
    }

    // 组件挂载完成后发起数据请求，仅执行一次
    componentDidMount() {
        fetch('api/Customer/Index')
            .then(response => response.json())
            .then(data => {
                this.setState({ cusList: data, loading: false })
            })
            .catch(error => {
                console.error('获取客户数据失败:', error);
                this.setState({ loading: false });
            });
    }

    handleEdit(id) {
        // 这里添加你的编辑逻辑
        console.log('准备编辑客户ID:', id);
    }

    handleDelete(id) {
        // 这里添加你的删除逻辑
        console.log('准备删除客户ID:', id);
    }

    // 提取表格内容渲染逻辑，让render方法更简洁
    renderCustomerTable(customers) {
        return (
            <tbody>
                {customers.map(cus => (
                    <tr key={cus.Id}>
                        <td></td>
                        <td>{cus.Id}</td>
                        <td>{cus.Name}</td>
                        <td>{cus.Address}</td>
                        <td>
                            <a className="action" onClick={() => this.handleEdit(cus.Id)}>Edit</a> |
                            <a className="action" onClick={() => this.handleDelete(cus.Id)}>Delete</a>
                        </td>
                    </tr>
                ))}
            </tbody>
        );
    }

    render() {
        let contents = this.state.loading 
            ? <p><em>Loading...</em></p> 
            : this.renderCustomerTable(this.state.cusList);

        return (
            <table className='table'>
                <thead>
                    <tr>
                        <th></th>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                {contents}
            </table>
        );
    }
}

额外优化说明 #

• 给handleEdit和handleDelete做了this绑定，避免点击事件触发时出现this指向错误的问题。
• 添加了fetch的错误捕获逻辑，方便调试请求失败的场景。
• 把表格主体的渲染逻辑提取到独立方法中，让render方法更清晰，符合React代码拆分的最佳实践。

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