2017-12-27 429 views
0

獲取無法從孩子

TypeError: Object doesn't support property or method 'setState' 

嘗試從孩子父母設定的狀態改變父母的狀態。

父功能:

setSubject(id){ 
console.log(id); 
this.setState({ 
    currentSubject: id 
}); 
<Subjects authToken = {this.state.authToken} subjects = {this.state.subjects} setSubject = {this.setSubject} /> 

子功能:

const listSubjects = this.props.subjects.map(subject => { 
     return(<div key={subject.id}> 
        <li data-toggle="collapse" data-target={"#" + subject.id}>{subject.title}</li> 
        <div id={subject.id} className="collapse"> 
         <ul className="subject-features-list"> 
          <li onClick={() => this.props.setSubject(subject.id)}>Egzamino programa</li> 
          <li>Egzaminai pagal metus</li> 
         </ul> 
        </div> 
       </div> 

我在做什麼錯?

+0

https://blog.andrewray.me/react-es6-autobinding-and-createclass/ :) –

+0

Check this https://stackoverflow.com/questions/39503559/binding-error-on-react-causing- this-state-is-undefined-with-es6/39503728#39503728,setSubject函數綁定錯誤 –

回答

1

簡單的解決方案:

const newSetSubject= this.setSubject.bind(this) 
<Subjects authToken = {this.state.authToken} subjects = {this.state.subjects} setSubject = {this.newSetSubject} /> 

你爲什麼要這麼做?

this指函數或類,其方法要調用,在特定的情況下,你從某個類採取了setSubject方法,並把它給了另一個類或函數在其自己稱之爲的直接範圍。

在調用時,按照setSubject的實現,它期望當前作用域(這將成爲你的情況下的子函數的作用域)具有setState方法。

所以問題的要點是this的範圍是指子函數的範圍。

考慮下面的例子:

class PersonComponent { 
    age = 21 //default case 
    render() { 
    return <div> Person's age is {this.props.getAge()}</div> 
    } 
} 

情況1:

class Person { 
    name = "John Doe" 

    age = 29 
    getAge() { 
    return this.a; 
    } 
    render() { 
    return <PersonComponent getAge={this.getAge} /> 
    } 
} 

在這種情況下的結果將是21,因爲在PersonComponent的範圍內,age設定在21

情況2:

class Person { 
    name = "John Doe" 

    age = 29 
    getAge() { 
    return this.a; 
    } 
    render() { 
    return <PersonComponent getAge={this.getAge.bind(this)} /> 
    } 
} 

在這種情況下,結果將是Person's age is 29,因爲通過使用bind你明確地創建已預先確定的範圍使用的新方法。