遗漏的类型错误：无法读取属性“状态或道具”的未定义

Question

于是我开始从ES2015到ES6它使用阵营转换我的应用程序。

我有一个父类和子类，像这样，

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

然而，这将导致以下错误，

this.state是未定义

它指的是，

if (this.state.code == "") {
    // Some functionality
}

任何想法可能是什么造成的？

Answer 1

您可以使用箭头功能绑定功能。您需要绑定无论是在儿童功能以及父组件。

家长：

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

或者您可以指定在构造函数中作为约束性

家长：

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

Answer 2

我同意除了直接结合在渲染由@Shubham Kathri给所有不同的解决方案。

建议不要直接绑定的功能呈现。建议您将它绑定在构造函数中总是因为如果你不直接结合在渲染那么只要你的组件呈现的WebPack将创建捆绑文件因此的WebPack包文件大小增加了新的功能/对象。由于多种原因您的组件重新呈现如：做的setState但如果你把它放在构造函数调用它之前调用一次。

不建议实施以下

<Child onCodeChange={this.setCodeChange.bind(this)} onLogin={this.login.bind(this)} />

做它在构造函数总是和使用ref任何需要的地方

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

<Child onCodeChange={this.setCodeChange} onLogin={this.login} />

如果您正在使用ES6然后手工装订不是必需的，但如果你愿意，你可以。如果你想走就走与范围有关的问题和手动功能/对象的绑定，您可以使用箭头功能。

很抱歉，如果有，我在我的手机接听任何错别字