[英]Cannot read property 'function' of undefined using this.function (React.js)
I have been researching this topic for a while and am completely stuck. 我已经研究这个主题一段时间了,完全陷入困境。 I am using
React.js
, and using an es6 class component. 我正在使用
React.js
,并使用es6类组件。
When I call this.showDate
inside of my filterCourses
function it is claiming that it can't read the showDate
property of undefined
. 当我在
filterCourses
函数内部调用this.showDate
,它声称无法读取undefined
的showDate
属性。 This means the keyword this
is undefined
. 这意味着关键字
this
是undefined
。
I have tried binding this
in the constructor. 我曾尝试结合
this
在构造函数中。
Question 题
How do I make this
defined? 我
this
如何定义?
class Upcoming_Training extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
}
}
componentDidMount() {}
showDate(date) {
// Creates a more readable date
if (date) {
date = date.substring(0, date.indexOf("T"));
let dateArr = date.split('-');
return dateArr[1] + '/' + dateArr[2] + '/' + dateArr[0];
}
}
filterCourses() {
let courseRows = [];
if (this.props.upcoming_training != []) {
if (this.showDate) {
let courseRows = this.props.upcoming_training.map(function (
course, index) {
return <tr>
<th><button className='btn btn-sm btn-primary'> More Info </button></th> {/*Will make this button do something later*/}
<td>{course.Course}</td>
<td> {(course.Name.includes("OL -") ? course.Name.slice(5) : course.Name)}</td>
<td>{this.showDate(course.Start)}</td>
<td>{this.showDate(course.End)}</td>
<td>{(course.IsOnline ? "Online" : "On-Site")}</td>
</tr>
})
}
return courseRows;
}
return [];
}
As Emil H mentioned in the comments above, the issue is that this
is not bound once you enter the map
function. 正如周华健的H上述意见提到的,问题是,
this
一次,你进入未绑定map
功能。 You can either pass the thisArg
to the map function, or move that function to a separate class function that you bind in your constructor. 您可以将
thisArg
传递给map函数,或者将该函数移至绑定到构造函数中的单独的类函数。 That would look something like this (untested): 看起来像这样(未经测试):
class Upcoming_Training extends Component {
constructor(props) {
super(props);
this.filterCourses = this.filterCourses.bind(this);
this.renderCourseRow = this.renderCourseRow.bind(this);
}
showDate(date) {
// Format date...
}
renderCourseRow(course, index) {
return (
<tr key={index}>
<th><button className='btn btn-sm btn-primary'> More Info </button></th>
<td>{course.Course}</td>
<td>{(course.Name.includes("OL -") ? course.Name.slice(5) : course.Name)}</td>
<td>{this.showDate(course.Start)}</td>
<td>{this.showDate(course.End)}</td>
<td>{(course.IsOnline ? "Online" : "On-Site")}</td>
</tr>
)
}
filterCourses() {
if (this.props.upcoming_training != []) {
return this.props.upcoming_training.map(renderCourseRow);
}
return [];
}
// ...Rest of component
}
First remove comma after inputValue: '',
in the this.state declaration. 首先在this.state声明中的inputValue
inputValue: '',
之后删除逗号。 Also in your filterCourses function the if(this.showDate)
condition is looking for a showDate property not a function. 同样在filterCourses函数中,
if(this.showDate)
条件正在寻找showDate属性而不是函数。 You function showDate also expects a date. 您的showDate函数也需要一个日期。
You also need a render function as any react component is required to have one. 您还需要一个render函数,因为任何react组件都需要一个render函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.