更新React Grandparent状态从onClick在Grandchild

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 - How to pass values from child component to grand-parent component?传递回调函数n，但回调仍然不能识别祖父母的状态。 console.log（this.state）在App.jsx中返回undefined，即使classId是正确的，并且错误显示为“Exception in delivery result invocation'getCourseById'：TypeError：this.setState不是函数”

这是绑定的问题吗？我已经尝试过没有课程作为自己的组件，并有相同的问题。

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) 
    } 
}); 

TO

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);