小能豆

React render() 在 componentDidMount() 之前被调用

javascript

在我的系统中componentDidMount(),我正在进行一个 API 调用来获取一些数据,然后这个调用设置了一个我在渲染中使用的状态对象。

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 值返回一个空数组。

这就是我传递道具的方式:

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 一样。


阅读 53

收藏
2024-06-02

共1个答案

小能豆

根据您提供的代码和描述,可能存在以下几种情况导致 survey_actual_answers 在第一次加载页面时为空:

  1. 异步加载数据的延迟问题componentDidMount 中的 API 调用可能需要一些时间才能完成,特别是如果网络延迟较大或服务器响应时间较长。在此期间,渲染函数可能已经执行并且 survey_actual_answers 还没有被设置。

  2. 组件状态更新延迟:即使 API 调用完成并且将数据设置为组件状态后,也可能存在一些延迟,直到状态更新反映到组件的 props 中。这种情况下,您在渲染函数中使用的 survey_actual_answers 可能还没有被正确设置。

为了解决这个问题,您可以尝试以下几种方法:

  1. 添加加载状态:在组件中添加一个加载状态,当数据加载完成前显示加载状态或加载动画,直到数据完全加载并且正确设置到组件的 props 中。

  2. 检查 API 调用:确保 API 调用在组件挂载后立即触发,并且能够正常完成。您可以在开发者工具中查看网络请求,以确保 API 请求已成功发送并且返回了预期的数据。

  3. 使用 componentDidUpdate:如果您发现 componentDidMount 中的数据获取有延迟,并且需要等待数据加载完成后再进行其他操作,可以考虑使用 componentDidUpdate 来监视 props 的变化,并在数据加载完成后执行相应的操作。

  4. 检查 mapStateToProps:确保 mapStateToProps 中返回的 state 中的 survey_actual_answers 数据确实存在,并且在 API 调用成功后能够正确更新。您可以在 mapStateToProps 中添加一些日志或调试语句来检查数据的状态。

  5. 确保正确绑定 mapDispatchToProps:确保 mapDispatchToProps 中正确绑定了 actions,并且 actions 中的 surveyAnswersRequest 被正确触发和处理。

通过仔细检查以上几点,您应该能够找到导致 survey_actual_answers 第一次加载为空的原因,并采取相应的措施解决问题。如果问题仍然存在,请提供更多细节或代码片段,以便我们更好地帮助您解决问题。

2024-06-02