React动态渲染函数中setCustomer调用报错：Cannot read properties of undefined

核心问题 #

你遇到的错误源于两个关键问题：

• this上下文丢失：renderCustomerRow函数在map中调用时，this指向变为undefined，导致无法访问组件实例的setCustomer方法。
• 事件处理函数立即执行：onClick={this.setCustomer(customerCard)}会在组件渲染时直接调用setCustomer，而非点击元素时触发，同时也会引发不必要的函数执行。

具体修复步骤 #

1. 修复renderCustomerRow的this上下文 #

有三种常用方式解决这个问题：

方式一：将renderCustomerRow改为箭头函数

箭头函数会自动绑定组件实例的this，无需额外处理：

renderCustomerRow = (customer) => {
    let customerCard = customer;
    return(
        <div className='Component-Element-Container' onClick={() => this.setCustomer(customerCard)}>
            <a href={`/Customer/${customer.CustomerName.replace(/\s/g, '')}`}>
                <h3>{customer.CustomerName}</h3>
            </a>
            <p>{customer.CustomerStreet1}</p>
        </div>
    )
}

方式二：在map中使用箭头函数包裹

在调用map时，用箭头函数传递参数，保留this上下文：

{CustomerList.length > 0 ? CustomerList.map(customer => this.renderCustomerRow(customer)) : <div>No number</div>}

方式三：在constructor中绑定this

在构造函数中手动绑定renderCustomerRow的this：

constructor(props){
    super(props);
    this.state = {
        customerList: [],
        firstPage: 0,
        lastPage: 10 // 根据你的分页逻辑调整
    };
    this.renderCustomerRow = this.renderCustomerRow.bind(this);
}

2. 修复onClick事件处理逻辑 #

将直接调用函数改为传递一个待执行的函数引用，确保点击时才触发setCustomer：

// 原错误代码：
onClick={this.setCustomer(customerCard)}

// 修改后：
onClick={() => this.setCustomer(customerCard)}

3. 补充：初始化state避免渲染错误 #

确保在构造函数中初始化customerList为空数组，避免组件首次渲染时因this.state.customerList未定义而报错：

constructor(props){
    super(props);
    this.state = {
        customerList: [],
        firstPage: 0,
        lastPage: 10,
        component: '' // 根据你的组件逻辑初始化
    };
}

完整修复后的代码示例 #

export default class Customers extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            customerList: [],
            firstPage: 0,
            lastPage: 10,
            component: ''
        };
        // 如果使用方式三，取消下面的注释
        // this.renderCustomerRow = this.renderCustomerRow.bind(this);
    }

    getListOfCustomers(){
        fetch(variables.API_URL + 'CustomerAPI', API_CALL_HEADER_GET_REQUEST)
            .then(response => response.json())
            .then(returnedResponse => {
                this.setState({customerList: returnedResponse})
            }).catch(error => {
                if (error) console.log(error)
            })
    }

    setCustomer = (customer) => {
        console.log('this fires now!')
        this.props.setActiveCustomer(customer.CustomerName)
        console.log(customer)
    }

    // 使用方式一：改为箭头函数
    renderCustomerRow = (customer) => {
        let customerCard = customer;
        return(
            <div className='Component-Element-Container' onClick={() => this.setCustomer(customerCard)}>
                <a href={`/Customer/${customer.CustomerName.replace(/\s/g, '')}`}>
                    <h3>{customer.CustomerName}</h3>
                </a>
                <p>{customer.CustomerStreet1}</p>
            </div>
        )
    }

    render(){
        const CustomerList = this.state.customerList.slice(this.state.firstPage,this.state.lastPage)
        return(
            <div className='Customers'>
                <HeaderComponent component={this.state.component}/>
                <div className='Component-Body'>
                    {CustomerList.length > 0 ? CustomerList.map(this.renderCustomerRow) : <div>No number</div>}
                    <div className='component-element-container'>
                        <div className='center'>
                            <button className='green forward-button' id='forward-button' onClick={this.handleClick.bind(this)}>Click</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

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