Javascript 与 ES7 反应：未捕获的类型错误：无法读取未定义的属性“状态”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35287949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined
提问by Khpalwalk
I'm getting this error Uncaught TypeError: Cannot read property 'state' of undefinedwhenever I type anything in the input box of AuthorForm. I'm using React with ES7.
我收到此错误Uncaught TypeError: Cannot read property 'state' of undefined每当我在 AuthorForm 的输入框中键入任何内容时。我在 ES7 中使用 React。
The error occurs on 3rd line of setAuthorState function in ManageAuthorPage. Regardless of that line of code even if I put a console.log(this.state.author) in setAuthorState, it will stop at the console.log and call out the error.
错误发生在 ManageAuthorPage 中 setAuthorState 函数的第 3 行。不管那行代码如何，即使我在 setAuthorState 中放置了一个 console.log(this.state.author)，它也会在 console.log 处停止并显示错误。
Can't find similar issue for someone else over the internet.
在互联网上找不到其他人的类似问题。
Here is the ManageAuthorPagecode:
这是ManageAuthorPage代码：
import React, { Component } from 'react';
import AuthorForm from './authorForm';
class ManageAuthorPage extends Component {
state = {
author: { id: '', firstName: '', lastName: '' }
};
setAuthorState(event) {
let field = event.target.name;
let value = event.target.value;
this.state.author[field] = value;
return this.setState({author: this.state.author});
};
render() {
return (
<AuthorForm
author={this.state.author}
onChange={this.setAuthorState}
/>
);
}
}
export default ManageAuthorPage
And here is the AuthorFormcode:
这是AuthorForm代码：
import React, { Component } from 'react';
class AuthorForm extends Component {
render() {
return (
<form>
<h1>Manage Author</h1>
<label htmlFor="firstName">First Name</label>
<input type="text"
name="firstName"
className="form-control"
placeholder="First Name"
ref="firstName"
onChange={this.props.onChange}
value={this.props.author.firstName}
/>
<br />
<label htmlFor="lastName">Last Name</label>
<input type="text"
name="lastName"
className="form-control"
placeholder="Last Name"
ref="lastName"
onChange={this.props.onChange}
value={this.props.author.lastName}
/>
<input type="submit" value="Save" className="btn btn-default" />
</form>
);
}
}
export default AuthorForm
采纳答案by Alexander T.
Make sure you're calling super()as the first thing in your constructor.
确保您super()在构造函数中首先调用。
You should set thisfor setAuthorStatemethod
你应该设置this的setAuthorState方法
class ManageAuthorPage extends Component {
state = {
author: { id: '', firstName: '', lastName: '' }
};
constructor(props) {
super(props);
this.handleAuthorChange = this.handleAuthorChange.bind(this);
}
handleAuthorChange(event) {
let {name: fieldName, value} = event.target;
this.setState({
[fieldName]: value
});
};
render() {
return (
<AuthorForm
author={this.state.author}
onChange={this.handleAuthorChange}
/>
);
}
}
Another alternative based on arrow function:
另一种选择基于arrow function：
class ManageAuthorPage extends Component {
state = {
author: { id: '', firstName: '', lastName: '' }
};
handleAuthorChange = (event) => {
const {name: fieldName, value} = event.target;
this.setState({
[fieldName]: value
});
};
render() {
return (
<AuthorForm
author={this.state.author}
onChange={this.handleAuthorChange}
/>
);
}
}
回答by madox2
You have to bind your event handlers to correct context (this):
您必须将事件处理程序绑定到正确的上下文 ( this)：
onChange={this.setAuthorState.bind(this)}
