從孫中的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);