反应：类型错误：无法读取未定义的属性'state'。需要解释

Question

我刚开始使用React，遇到了一个小TypeError：无法读取未定义的属性"state"，我相信这是一个基本的JS东西。有人能解释一下为什么我用正常的函数语法而不是箭头函数语法不断出现这个错误吗。这是我写的代码：

class App extends React.Component {
state = {term: ''};
onFormSubmit(e) {
e.preventDefault();
console.log(this.state.term)
}
render() {
return (
<div className="ui segment">
<form onSubmit={this.onFormSubmit} className="ui form">
<div className="field">
<label>Image Search</label>
<input
type="text"
placeholder="Search"
value={this.state.term}
onChange={e => this.setState({ term:e.target.value })}
/>
</div>
</form>
<h1 className="ui segment">{this.state.term}</h1>
</div>
);
}
}

如果能提供一点帮助，我们将不胜感激。非常感谢。

Answer 1

类组件中的函数有两种方法可以使用this

第一种是在constructor内bind

constructor() {
super();
this.onFormSubmit= this.onFormSubmit.bind(this);
}

第二是使用这种方法

onFormSubmit = e => {
e.preventDefault();
console.log(this.state.term)
}

Answer 2

您使用的是一个类组件，因此您需要一个类似的构造函数(文档(

class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
term: ''
};
this.onFormSubmit= this.onFormSubmit.bind(this);
}
}

super关键字指的是父类。

它用于调用父类的构造函数，并访问父类的属性和方法，这显然是您想要做的

当事件发生并调用处理程序时，由于类声明和原型方法在严格模式下运行，this值将回落到默认绑定并设置为undefined。当我们将事件处理程序的this绑定到构造函数中的组件实例时，我们可以将其作为回调传递，而不用担心它会丢失上下文。阅读更多

然后，如果您想使用正则函数，您需要将该函数的this与您声明的类绑定。

此时，您可以开始编写函数：

onFormSubmit(e) {
e.preventDefault();
console.log(this.state.term)
}

另一种方法是使用箭头功能：

const onFormSubmit = e => {
e.preventDefault();
console.log(this.state.term)
}

或者，也可以使用功能组件。箭头函数之所以有效，是因为它没有创建自己的this。因此，onFormSubmit中的这个引用的是类Example，而不是它本身，这显然是未定义的(阅读更多(。

Answer 3

建议：-使用功能组件

有两种方法可以解决这个问题

更改：-

<form onSubmit={this.onFormSubmit} className="ui form">

至

<form onSubmit={(e) => this.onFormSubmit(e)} className="ui form">

或

更改：-

onFormSubmit(e){
e.preventDefault();
console.log(this.state.term);
};

至

const onFormSubmit = (e) => {
e.preventDefault();
console.log(this.state.term);
};