第 17：20 行："计数"未定义 no-undef

Question

我试图使用按钮显示每次点击计数，但我遇到了一个问题，我的代码。当我运行代码时，它无法编译，但是当您检查页面时，您可以看到显示的时间。这是我的代码。

import React from 'react'
export default class Profile extends React.Component{
constructor(){
super();
this.state={
name:'Abdur Rehman',
email: '[e-mail]',
count: 0,
}
}
test(){
this.setState({
name: 'Jamal',
email: '[e-mail]',
count: count+1
}
)
}
render(){
return(
<div>
<h1>hello {this.state.name}</h1>
<h1>Email: {this.state.email}</h1>
<h1>Count: {this.state.count}</h1>
<button onClick={()=>{this.test()}}>Update Name</button>
</div>
);
}
}

Answer 1

我不知道为什么它会编译失败，但我可以在您的测试方法中发现逻辑错误。

count: count+1

应:

count: this.state.count+1

或者更好:

count: this.state.count++

这是因为您需要记住使用" This "引用类Profile的实例。关键字。这是必要的，因为任何赋值都需要引用count变量存储的显式路径，即This .state.count.

看看这是否对你有用:)

Answer 2

导入以前的状态，也不要在constructor函数之外改变this.state变量，在测试函数中使用this.setState，这也将呈现组件

import React from 'react'
export default class Profile extends React.Component{
constructor(){
super();
this.state={
name:'Abdur Rehman',
email: '[e-mail]',
count: 0,
}
}
test(){
this.setState({
...this.state,
name: 'Jamal',
email: '[e-mail]',
count: this.state.count + 1
}
)
}
render(){
return(
<div>
<h1>hello {this.state.name}</h1>
<h1>Email: {this.state.email}</h1>
<h1>Count: {this.state.count}</h1>
<button onClick={()=>{this.test()}}>Update Name</button>
</div>
);
}
}