javascript - 道具更改后 axios.get 调用时将更新的状态传递给孩子
问题描述
当父组件中的道具发生更改并且 axios.get 请求从服务器获取数据并且状态发生更改时,我想将更新的状态传递给子组件。我在子组件中获得了第一个状态,但是当道具更改后,父状态已更新,但更新后的状态无法传递给子组件。
父组件
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();
});
}
解决方案
推荐阅读
- c++ - 如何使用本地声明的头制作链表?
- python - 当我使用 Google Calendar API Python 输入新事件时,如何自定义我的 Google Calendar 事件 ID?
- c# - 如何循环分配内存?
- airflow - 气流用户模拟(run_as_user)不起作用
- html - 从无线电输入标签中添加和删除类
- python - 执行更好的调整 - 使用 python 进行非线性回归
- javascript - 节点:为模块提供参数的更好方法
- windows - 是否可以在 windows server 2008 r2 上安装 WSL 或 windows 终端?
- javascript - 在 js 数组中仅标记第二个重复的对象
- python - 为每个网球运动员创建新的数据框