onClick没有定义MERN堆栈

Question

我正在制作一个大学注册网站，我试图制作一个列表，学生可以选择某个专业来查看其中的所有课程，所以我制作了一个列表，其中包含所有专业和按钮，但每次我试图使用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>
)
}
}

Answer 1

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

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

这个单独不能修复它的原因是因为你实际上没有从你的类引用this。您引用的匿名函数用作回调从您的地图，它有自己的this，显然不是onClick属性:

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

最简单的补救方法是转换为一个箭头函数，它没有自己的this上下文，而是继承了上面的作用域(你的类组件)。

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

关于这两种函数表达式类型之间的区别的更多细节，请参阅本线程。

Answer 2

onClick不是一个变量，它是一个属性。

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

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