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，您明确地创建了一个具有预定义范围的新方法。

不能改变父母对孩子的状态

1 个答案: