onClick 未定义 MERN 堆栈答案

【问题标题】：onClick is not defined MERN stackonClick 未定义 MERN 堆栈
【发布时间】：2021-02-28 18:31:37
【问题描述】：

我正在制作一个大学注册网站，我正在尝试制作一个列表，让学生可以选择某个专业来查看其中的所有课程，所以我制作了一个列表，其中包含所有专业和前面的按钮，但每次我尝试使用onClick() 函数转到另一个页面，其中包含undefined 的课程列表。

我的代码：

import React, { Component } from 'react';
import axios from 'axios';
import { Table } from 'react-bootstrap'
import { Button, Icon } from 'semantic-ui-react';
import { Image, List } from 'semantic-ui-react'
import { left } from '@popperjs/core';

export default class CreateExercise extends Component {
    constructor(props) {
        super(props);

        this.onClick = this.onClick.bind(this);
    }

    onClick(e) {
        window.location = '/' + e
    }

    render() {
        return (
            <div>
                <ul>
                    {['Adolescence Education: Chemistry (7-12)',
                        'Adolescence Education: Social Studies (7-12)',
                        'Biological Sciences',
                        'Chemistry',
                        'English',
                        'History',
                        'Industrial and Labor Relations',
                        'Liberal Arts',
                        'Media and Communications',
                        'Philosophy and Religion',
                        'Politics & Economics & Law',
                        'Spanish Language',
                        'Visual Arts',
                        'Adolescence Education: Biology (7-12)',
                        'Adolescence Education: Mathematics (7-12)',
                        'Biochemistry',
                        'Business Administration',
                        'Childhood Education (1-6)',
                        'Computer & Information Science',
                        'Criminology',
                        'Finance',
                        'General Studies',
                        'Health and Society',
                        'Industrial and Labor Relations',
                        'Management Information Systems',
                        'Marketing',
                        'Mathematics',
                        'Psychology',
                        'Sociology',
                        'Special Education and Childhood Education (1-6)',
                        'Visual Arts: Electronic Media'
                    ].map(function (item) {
                        return (
                            <li key={item}>
                                {item}
                                <button type="button" type="button" onClick={onClick({ item })} style={{ position: 'absolute', left: '50%' }} >Click to view courses</button>
                            </li>
                        );
                    })}
                </ul>
            </div>
        )
    }
}

【问题讨论】：

在componentWillMount钩子里做
onClick={onClick({ item })} 应该是onClick={()=>this.onClick(item)}
@DanielCheung 我得到 TypeError: Cannot read property 'onClick' of undefined
@esmailsaba 抱歉，我在您阅读后删除了我的评论。 Lakshya 的回答是正确的。原因是onClick 没有定义为变量，而是this 的属性。
@Solvenc1no 你能详细说明一下吗？

标签： javascript reactjs

【解决方案1】：

这里的问题有两个部分。首先，正如其他人指出的那样，您需要调用 this.onClick()，因为点击处理程序是您的 CreateExercise 类的属性，而不是变量。

onClick={() => this.onClick(item)}

仅此一项无法解决此问题的原因是因为您实际上并未引用班级中的this。您正在引用用作地图回调的匿名函数，该函数有自己的this，显然不是onClick 属性：

{[...arrayOfCourses].map(function(item) { ... })}

解决此问题的最简单方法是转换为没有自己的 this 上下文但继承自上述范围（您的类组件）的箭头函数。

{[...arrayOfCourses].map((item) => { ... })}

有关两种函数表达式类型之间差异的更多详细信息，请参阅this thread。

【讨论】：

我只是有另一个问题，如果它进入专业/页面时可以使用 [object%20object] 而不是名称，我该如何解决这个问题
您的原始示例将方法称为onClick({item}) - 确保其onClick(item) 与此答案相同。传递{item} 会创建一个对象，该对象具有一个名为item 的属性，这是课程的名称——当与字符串连接时，这将转换为[object Object] 语法。另外，附带说明一下，该数组中的大多数字符串都不是有效的 URL（空格通常会转换为 %20），因此仅将它们添加到窗口位置可能不会生成任何可用的路由，除非您期望那个。
哦，我确实像你说的那样，但同样的事情发生了，是的，我希望它与 20% 一起发送
我真的不知道为什么会这样。尝试在单击处理程序中记录e，然后再将其添加到该位置，这应该会告诉您如果不是字符串，您将拥有什么。

【解决方案2】：

onClick 没有定义为变量，它是一个属性。

onClick={onClick({ item })} 不正确，因为它调用了onClick()，但是onClick() 没有定义，this.onClick() 是。

使用onClick={() => this.onClick(item)}。

【讨论】：

当我点击按钮时，它仍然给我无法读取未定义的属性“onClick”