从孙中的onClick更新React祖父母状态

Question

我正在尝试使用react创建一个元素列表，并在单击单个元素时更新此列表的父级状态。

整个容器是App.jsx（祖父母）

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedClass: null,
      query: "cs 2110"
    }

    this.handleSelectClass.bind(this);
  }

  handleSelectClass(classId) {
    console.log(classId);

    //get the id of the course and get full course details
    Meteor.call('getCourseById', classId, function(error, result) {
      if (!error) {
        console.log(this.state); 
        this.setState({selectedClass: result, query: ""}, function() {
          console.log(this.state.selectedClass);
          console.log(this.state.query);
        });
      } else {
        console.log(error)
      }
    });
  }

  //check if a class is selected, and show a coursecard only when one is.
  renderCourseCard() {
    var toShow = <div />; //empty div
    if (this.state.selectedClass != null) {
      toShow = <CourseCard course={this.state.selectedClass}/>;
    }
    return toShow;
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>
        <div className='row'>
          <input />
          <Results query={this.state.query} clickFunc={this.handleSelectClass}/>
        </div>
        <div className='row'>
          <div className="col-md-6">
            {this.renderCourseCard()}
          </div>
          <div className="col-md-6 panel-container fix-contain">
            <Form courseId="jglf" />
          </div>
        </div>
      </div>
    );
  }
}

父容器是Results.jsx

export class Results extends Component {
  constructor(props) {
    super(props);
  }

  renderCourses() {
    if (this.props.query != "") {
      return this.props.allCourses.map((course) => (
        //create a new class "button" that will set the selected class to this class when it is clicked.
        <Course key={course._id} info={course} handler={this.props.clickFunc}/>
      ));
    } else {
      return <div />;
    }
  }

  render() {
    return (
      <ul>
        {this.renderCourses()}
      </ul>
    );
  }
}

并且“课程”列表项是孙组件

export default class Course extends Component {
  render() {
    var classId = this.props.info._id;
    return (
      <li id={classId} onClick={() => this.props.handler(classId)}>{this.props.info.classFull}</li>
    );
  }
}

我遵循了这里的建议Reactjs-如何将值从子组件传递到祖父母组件？ 传递回调函数，但回调仍无法识别祖父母的状态。 即使classId正确，App.jsx中的console.log（this.state）仍返回未定义，并且错误显示“传递调用'getCourseById'的结果时出现异常：TypeError：this.setState不是函数”

绑定有问题吗？ 我已经尝试过不使用Course作为其自身组件，并且存在相同的问题。

Answer 1

快速浏览代码。 我可以看到一个问题就在这里。 即使已将函数绑定到组件，您仍在使用流星调用，该流星调用将结果范围限定在其自身的函数范围内，这意味着它将无法访问this.setState。 您可以使用粗箭头功能解决该问题，但是需要确保使用的是ES6。

Meteor.call('getCourseById', classId, function(error, result) => {
  if (!error) {
    console.log(this.state); 
    this.setState({selectedClass: result, query: ""}, function() {
      console.log(this.state.selectedClass);
      console.log(this.state.query);
    });
  } else {
    console.log(error)
  }
});

至

Meteor.call('getCourseById', classId, (error, result) => {
  if (!error) {
    console.log(this.state); 
    this.setState({selectedClass: result, query: ""}, () => {
      console.log(this.state.selectedClass);
      console.log(this.state.query);
    });
  } else {
    console.log(error)
  }
});

您还将函数错误地绑定到了组件。

this.handleClassSubmit = this.handleClassSubmit.bind(this);