Uncaught TypeError：無法讀取未定義的屬性「狀態或道具」

Question

因此，我開始將我的應用程序從ES2015轉換爲使用React的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); 
}