在我的系统中componentDidMount(),我正在进行一个 API 调用来获取一些数据,然后这个调用设置了一个我在渲染中使用的状态对象。
componentDidMount()
componentDidMount() { const { actions } = this.props; this.increase = this.increase.bind(this); // api call from the saga actions.surveyAnswersRequest(); // set breadcrumb actions.setBreadcrumb([{ title: 'Score' }]); actions.setTitle('Score'); this.increase(); }
在我的渲染函数中,我将一些 prop 值传递给视图文件:
render() { const { global, gallery, survey_answers, survey, survey_actual_answers } = this.props; if (global.isFetching) { return <Loading />; } return this.view({ gallery, survey_answers, survey, survey_actual_answers }); }
我遇到的问题是,survey_actual_answers第一次加载页面时没有设置 prop,但是当我刷新页面时,prop 会正确返回数据,其余脚本将运行。只有第一次它为该 prop 值返回一个空数组。
survey_actual_answers
这就是我传递道具的方式:
Score.propTypes = { actions: PropTypes.object.isRequired, global: PropTypes.object.isRequired, survey: PropTypes.object.isRequired, survey_answers: PropTypes.object.isRequired, gallery: PropTypes.object.isRequired, survey_actual_answers: PropTypes.array.isRequired, survey_score_system: PropTypes.array.isRequired, survey_styles: PropTypes.object.isRequired, survey_general_doc_data: PropTypes.object.isRequired }; function mapStateToProps(state, ownProps) { return { ...ownProps, global: state.global, gallery: state.gallery, survey: state.survey, survey_actual_answers: state.survey.survey_actual_answers, survey_answers: state.survey.survey_answers, survey_score_system: state.survey.survey_score_system, survey_styles: state.survey.survey_styles, survey_general_doc_data: state.survey.survey_general_doc_data, isFetching: state.isFetching }; } function mapDispatchToProps(dispatch) { return { actions: bindActionCreators({ ...globalActions, ...galleryActions, ...surveyActions }, dispatch) }; }
有人知道为什么会这样吗?就好像根本没有调用 componentDidMount 一样。
根据您提供的代码和描述,可能存在以下几种情况导致 survey_actual_answers 在第一次加载页面时为空:
异步加载数据的延迟问题:componentDidMount 中的 API 调用可能需要一些时间才能完成,特别是如果网络延迟较大或服务器响应时间较长。在此期间,渲染函数可能已经执行并且 survey_actual_answers 还没有被设置。
componentDidMount
组件状态更新延迟:即使 API 调用完成并且将数据设置为组件状态后,也可能存在一些延迟,直到状态更新反映到组件的 props 中。这种情况下,您在渲染函数中使用的 survey_actual_answers 可能还没有被正确设置。
为了解决这个问题,您可以尝试以下几种方法:
添加加载状态:在组件中添加一个加载状态,当数据加载完成前显示加载状态或加载动画,直到数据完全加载并且正确设置到组件的 props 中。
检查 API 调用:确保 API 调用在组件挂载后立即触发,并且能够正常完成。您可以在开发者工具中查看网络请求,以确保 API 请求已成功发送并且返回了预期的数据。
使用 componentDidUpdate:如果您发现 componentDidMount 中的数据获取有延迟,并且需要等待数据加载完成后再进行其他操作,可以考虑使用 componentDidUpdate 来监视 props 的变化,并在数据加载完成后执行相应的操作。
检查 mapStateToProps:确保 mapStateToProps 中返回的 state 中的 survey_actual_answers 数据确实存在,并且在 API 调用成功后能够正确更新。您可以在 mapStateToProps 中添加一些日志或调试语句来检查数据的状态。
确保正确绑定 mapDispatchToProps:确保 mapDispatchToProps 中正确绑定了 actions,并且 actions 中的 surveyAnswersRequest 被正确触发和处理。
通过仔细检查以上几点,您应该能够找到导致 survey_actual_answers 第一次加载为空的原因,并采取相应的措施解决问题。如果问题仍然存在,请提供更多细节或代码片段,以便我们更好地帮助您解决问题。