2017-12-27 929 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你明确地创建已预先确定的范围使用的新方法。