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