無法從孩子

Question

獲取

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> 

我在做什麼錯？

Answer 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你明確地創建已預先確定的範圍使用的新方法。