未捕获的类型错误:无法读取未定义的属性“状态或道具" [英] Uncaught TypeError: Cannot read property 'state or props' of undefined

问题描述

所以我开始将我的应用程序从 ES2015 转换为使用 React 的 ES6.

我有一个父类和一个子类，

export default class Parent extends Component {构造函数(道具){超级(道具)；this.state = {代码: ''};}设置代码更改(新代码){this.setState({code: newCode});}登录() {if (this.state.code == "") {//一些功能}}使成为() {返回 (<div><Child onCodeChange={this.setCodeChange} onLogin={this.login}/>

);}}

子类，

export default class Child extends Component {构造函数(道具){超级(道具)；}句柄代码更改(e){this.props.onCodeChange(e.target.value);}登录() {this.props.onLogin();}使成为() {返回 (<div><input name="code" onChange={this.handleCodeChange.bind(this)}/>

<button id="login" onClick={this.login.bind(this)}>);}}Child.propTypes = {onCodeChange: React.PropTypes.func,登录:React.PropTypes.func};

然而这会导致以下错误，

this.state 未定义

它指的是，

if (this.state.code == "") {//一些功能}

知道是什么原因造成的吗?

解决方案

你可以使用箭头函数来绑定你的函数.您需要在子组件和父组件中绑定函数.

家长:

export default class Parent extends Component {构造函数(道具){超级(道具)；this.state = {代码: ''};}setCodeChange = (newCode) =>{this.setState({code: newCode});}登录 = () =>{if (this.state.code == "") {//一些功能}}使成为() {返回 (<div><Child onCodeChange={this.setCodeChange} onLogin={this.login}/>

);}}

儿童

export default class Child extends Component {构造函数(道具){超级(道具)；}handleCodeChange = (e) =>{this.props.onCodeChange(e.target.value);}登录 = () =>{this.props.onLogin();}使成为() {返回 (<div><input name="code" onChange={this.handleCodeChange}/>

<button id="login" onClick={this.login}>);}}Child.propTypes = {onCodeChange: React.PropTypes.func,登录:React.PropTypes.func};

还有其他方法可以绑定函数，例如您正在使用的方法，但您也需要为父组件执行此操作，如 <Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)}/>

或者你可以在构造函数中指定绑定为

家长:

构造函数(道具){超级(道具)；this.state = {代码: ''};this.setCodeChange = this.setCodeChange.bind(this);this.login = this.login.bind(this);}

儿童

构造函数(道具){超级(道具)；this.handleCodeChange = this.handleCodeChange.bind(this);this.login = this.login.bind(this);}

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>
        );
    }
}

Child class,

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
};

However this causes the following error,

this.state is undefined

It refers to,

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.

Parent:

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>
        );
    }
}

Child

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
};

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

Parent:

constructor(props) {
    super(props);
    this.state = {
        code: ''
    };
 this.setCodeChange = this.setCodeChange.bind(this);
 this.login = this.login.bind(this);
}

Child

constructor(props) {
    super(props);
    this.handleCodeChange = this.handleCodeChange.bind(this);
    this.login = this.login.bind(this);
}

这篇关于未捕获的类型错误:无法读取未定义的属性“状态或道具"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！