Javascript 在更改道具后调用axios.get时将更新状态传递给子级

当父组件和axios中的道具发生更改时，我希望将更新的状态传递给子组件。get请求从服务器获取数据，状态发生更改。我在子组件中获得了第一个状态，但当道具更改后，父级状态得到更新，但更新的状态无法传递给子组件

ParentComponent

export default class OverallProgress extends Component {

constructor(props) {
    super(props);
    this.state = {
        selectedCourseID: props.selectedCourseID,
        overallProgressData: null,
         blocking: true
    };
}

componentDidMount() {
    this._loadData(this.props.selectedCourseID);
}

componentWillReceiveProps(nextProps) {
    this.setState({selectedCourseID: nextProps.selectedCourseID});
}

componentDidUpdate(prevProps) {
    if (this.props.selectedCourseID !== prevProps.selectedCourseID) {
        this._loadData(this.props.selectedCourseID);
    }
}

_loadData(selectedCourseID) {
    axios.get('/userquery/getDataForWidgets?widget_id=' + this.props.widgetID + '&course_id=' + selectedCourseID)
        .then((response) => {
            this.setState({
                overallProgressData: response.data,
                chartReportView: true,
                blocking: false
            });
        })
        .catch((error) => {
            alert('Oops! Something went wrong. Please refresh the page and try again.');
            if (error.response) {
                console.log(error.response);
            }
        });
}  render(){
     return(
        <div>
             <OverallProgressLineChart
                   data={this.state.overallProgressData}
                   selectedCourseID={this.state.selectedCourseID}
                                            />
               </div>)}

export default class OverallProgressLineChart extends Component {

constructor(props) {
    super(props);
    this.state = {
        courseWiseScoreDetailsOfAllExams: props.data,
        dataForSelectedCourse: {
            courseID: null,
            courseName: null,
            examNames: [],
            examScorePercentages: [],
            highestScore: 0,
            lowestScore: 0,
            averageScore: 0,
            examAttempted: 0
        }
    };
}

componentWillMount() {
    this.updateDataForSelectedCourse(this.props.selectedCourseID);
}

componentWillReceiveProps(nextProps) {
    this.updateDataForSelectedCourse(nextProps.selectedCourseID);}    
  updateDataForSelectedCourse(selectedCourseID = null) {
    let newDataForSelectedCourse = null;
        if (this.state.courseWiseScoreDetailsOfAllExams.courseID === 
  selectedCourseID) {
     newDataForSelectedCourse = this.state.courseWiseScoreDetailsOfAllExams;
        }
  this.setState({dataForSelectedCourse: newDataForSelectedCourse}, function () {
        this.setChartData();
    });
}

---

我想在父状态更新时在子状态中获取更新的状态。请有人查看我上面的代码，并在您的子组件中给我一个解决方案，当它实例化时，您正在使用props.data设置状态。最初，这将是空的。例如，总体进度数据。子组件中没有根据更改的值更新自身的规定。。。。。。。在我看来，您似乎试图在应用程序的多个级别上管理相同的状态值。这不是一个好办法。状态应仅在一个位置进行管理和更新。。。。重新阅读他们网站上的React文档。您应该在页面/应用程序中找到“最高”组件，该组件包含您需要向其传递数据的所有子级。状态应该在最高的组件中进行管理，并作为道具传递给子组件。如果采用这种方法（再次参见React site），则对状态的更改将向下传播到子组件……如果其中一个子组件需要更新父组件中某个组件的状态，然后，这也可以通过React实现，并且在React指南中有明确的解释。我想在父状态更新时在child中获得更新的状态。请有人查看我上面的代码，并在您的子组件中给我一个解决方案，当它实例化时，您正在使用props.data设置状态。最初，这将是空的。例如，总体进度数据。子组件中没有根据更改的值更新自身的规定。。。。。。。在我看来，您似乎试图在应用程序的多个级别上管理相同的状态值。这不是一个好办法。状态应仅在一个位置进行管理和更新。。。。重新阅读他们网站上的React文档。您应该在页面/应用程序中找到“最高”组件，该组件包含您需要向其传递数据的所有子级。状态应该在最高的组件中进行管理，并作为道具传递给子组件。如果采用这种方法（再次参见React站点），则状态的更改将向下传播到子组件……如果其中一个子组件需要更新父组件中某个组件的状态，那么这也可以通过React实现，并且在React指南中有明确的说明。