Uncaught TypeError:无法读取未定义的属性“状态或道具" [英] Uncaught TypeError: Cannot read property 'state or props' of undefined
问题描述
所以我开始将我的应用程序从ES2015转换为使用React的ES6.
So I started converting my application from ES2015 to ES6 which uses React.
我有一个父类和一个子类,
I have a parent class and a child class like so,
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
code: ''
};
}
setCodeChange(newCode) {
this.setState({code: newCode});
}
login() {
if (this.state.code == "") {
// Some functionality
}
}
render() {
return (
<div>
<Child onCodeChange={this.setCodeChange} onLogin={this.login} />
</div>
);
}
}
子类,
export default class Child extends Component {
constructor(props) {
super(props);
}
handleCodeChange(e) {
this.props.onCodeChange(e.target.value);
}
login() {
this.props.onLogin();
}
render() {
return (
<div>
<input name="code" onChange={this.handleCodeChange.bind(this)}/>
</div>
<button id="login" onClick={this.login.bind(this)}>
);
}
}
Child.propTypes = {
onCodeChange: React.PropTypes.func,
onLogin: React.PropTypes.func
};
但这会导致以下错误,
此状态未定义
它指的是
if (this.state.code == "") {
// Some functionality
}
有什么想法会导致这种情况吗?
Any idea what could be causing this ?
推荐答案
您可以使用箭头功能绑定您的功能.您需要在子组件和父组件中都绑定功能.
You can use arrow function to bind you functions. You need to bind you functions both in child as well as parent components.
父母:
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
code: ''
};
}
setCodeChange = (newCode) => {
this.setState({code: newCode});
}
login = () => {
if (this.state.code == "") {
// Some functionality
}
}
render() {
return (
<div>
<Child onCodeChange={this.setCodeChange} onLogin={this.login} />
</div>
);
}
}
孩子
export default class Child extends Component {
constructor(props) {
super(props);
}
handleCodeChange = (e) => {
this.props.onCodeChange(e.target.value);
}
login = () => {
this.props.onLogin();
}
render() {
return (
<div>
<input name="code" onChange={this.handleCodeChange}/>
</div>
<button id="login" onClick={this.login}>
);
}
}
Child.propTypes = {
onCodeChange: React.PropTypes.func,
onLogin: React.PropTypes.func
};
还有其他绑定功能的方法,例如您正在使用的一种,但您也需要对父级组件进行绑定,例如<Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)} />
There are other ways to bind the functions as well such as the one you are using but you need to do that for parent component too as <Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)} />
或者您可以在构造函数中将绑定指定为
or you can specify binding in the constructor as
父母:
constructor(props) {
super(props);
this.state = {
code: ''
};
this.setCodeChange = this.setCodeChange.bind(this);
this.login = this.login.bind(this);
}
孩子
constructor(props) {
super(props);
this.handleCodeChange = this.handleCodeChange.bind(this);
this.login = this.login.bind(this);
}
这篇关于Uncaught TypeError:无法读取未定义的属性“状态或道具"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!