React类组件点击事件报错Cannot Read Properties Of Undefined Reading handleCategory问询

错误原因 #

1. 你调用this.state.categories.map(this.renderCategory)时，renderCategory方法的执行上下文丢失，内部this不再指向组件实例，所以访问this.handleCategory时报undefined错误。
2. 给<option>绑定点击事件不是下拉选择的标准实现，存在浏览器兼容问题，正确做法是将选择事件绑定到<select>的onChange属性上。

修复方案 #

你可以按以下步骤修改：

步骤1：修复renderCategory的this指向

任选以下一种方案即可：

• 在constructor中添加renderCategory的绑定语句：

this.renderCategory = this.renderCategory.bind(this);

• 调用map时用箭头函数包裹调用：

this.state.categories.map(cat => this.renderCategory(cat))

• 将renderCategory改为箭头函数类属性：

renderCategory = (category) => {
  // 原有逻辑不变
}

步骤2：调整事件绑定位置

移除<option>上的onClick属性，给<select>标签添加onChange={this.handleCategory}，同时给select加value属性实现受控组件，保证UI和状态同步。

修改后的完整代码 #

import React from 'react';
import classes from '../css/Landing.module.css';
import mainClasses from '../../MainCss/MainClasses.module.css';
import { LOAD_CATEGORIES } from '../../graphql/queries';
export default class Landing extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            categories: [],
            loading: true,
            category: null,
        };
        this.handleCategory = this.handleCategory.bind(this);
        // 新增renderCategory的this绑定
        this.renderCategory = this.renderCategory.bind(this);
    }

    async componentDidMount() {
        const { client } = this.props;
        const { data } = await client.query({ query: LOAD_CATEGORIES });
        const { categories } = data;
        this.setState((prevState) => ({ ...prevState, categories: categories, loading: false, category: categories[0]?.name }));
    }

    handleCategory(e) {
        this.setState((prevState) => ({ ...prevState, category: e.target.value }));
    }

    renderCategory(category) {
        return (
            // 移除option上的点击事件
            <option key={category.name} value={category.name}>
                {category.name}
            </option>
        );
    }

    render() {
        return (
            <div className={`${classes.root} ${mainClasses.container} ${mainClasses.column}`}>
                <div className={`${mainClasses.container} ${mainClasses.row}`}>
                    <label className={classes.categorylabel}>Choose Category</label>
                    {this.state.loading ? 'loading' : (
                        // 给select添加值绑定和变化事件
                        <select 
                            className={classes.categorymenu} 
                            value={this.state.category}
                            onChange={this.handleCategory}
                        >
                            {this.state.categories.map(this.renderCategory)}
                        </select>
                    )}
                </div>
                <div>{this.state.category}</div>
            </div>
        );
    }
}

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