在componentDidMount（）之前调用react render（） [英] React render() is being called before componentDidMount()

问题描述

在我的 componentDidMount（）我正在进行API调用以获取一些数据，然后这个调用设置我在渲染中使用的状态对象。

In my componentDidMount() I am making an API call to fetch some data, this call then sets a state object that I use in my render.

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();
        }

在我的渲染函数中，我将一些道具值传递给视图文件：

In my render function I pass some prop values onto the view file:

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

The problem I am having is that the survey_actual_answers prop is not being set the first time that the page is loaded, however when I refresh the page the prop returns the data fine and the rest of the script will run. It's only the first time that it returns an empty array for that prop value.

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

This is how I have passed my props in:

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。

Does anyone know why this is happening? It's almost as if it's not calling componentDidMount at all.

推荐答案

这是因为React从根本上如何运作。 React应该感觉快速，流畅和活泼;应用程序永远不会被http请求或异步代码堵塞。答案是使用生命周期方法来控制DOM。

This is happening because of how React works fundamentally. React is supposed to feel fast, fluent and snappy; the application should never get clogged up with http requests or asynchronous code. The answer is to use the lifecycle methods to control the DOM.

组件安装时的含义是什么？

理解一些React词汇表可能会有所帮助。安装组件时，它将被插入DOM。这是在调用构造函数时。 componentWillMount几乎与构造函数同义，并且大约在同一时间调用。 componentDidMount仅在第一次渲染后调用一次。

It might be helpful to understand some of the React vocabularies a little better. When a component is mounted it is being inserted into the DOM. This is when a constructor is called. componentWillMount is pretty much synonymous with a constructor and is invoked around the same time. componentDidMount will only be called once after the first render.

componentWillMount - > 渲染 - > componentDidMount

componentWillMount --> render --> componentDidMount

与重新渲染或更新有什么不同？

既然组件在DOM中，您想要更改显示的数据。当调用setState或从父组件传递新的道具时，将发生组件更新。

Now that the component is in the DOM, you want to change the data that is displayed. When calling setState or passing down new props from the parent component a component update will occur.

componentWillRecieveProps - > shouldComponentUpdate - > componentWillUpdate

- > 渲染 - > componentDidUpdate

componentWillRecieveProps --> shouldComponentUpdate-->componentWillUpdate
-->render-->componentDidUpdate

还可以注意到，http请求通常在componentDidMount和componentDidUpdate中完成，因为这些是我们可以使用setState触发重新渲染的地方。

It is also good to note that http requests are usually done in componentDidMount and componentDidUpdate since these are places that we can trigger a rerender with setState.

那么如何在呈现之前获取数据呢？

嗯，有几种方法可以让人们处理这个问题。第一个是在组件中设置初始状态，以确保如果来自http请求的数据尚未到达，它将不会破坏您的应用程序。它将使用默认或空状态，直到http请求完成。

Well, there are a couple of ways that people take care of this. The first one would be to set an initial state in your component that will ensure that if the data from the http request has not arrived yet, it will not break your application. It will use a default or empty state until the http request has finished.

我通常不喜欢有一个加载模式，但有时它是必要的。例如，当用户登录时，您不希望将它们带到站点的受保护区域，直到完成身份验证。我尝试做的是在用户登录到尽可能多的数据时使用该加载模式而不影响用户体验。

I usually don't like to have a loading modal, but sometimes it is necessary. For instance, when a user logs in you don't want to take them to a protected area of your site until they are finished authenticating. What I try to do is use that loading modal when a user logs in to front load as much data as I possibly can without affecting the user experience.

您还可以制作组件显示为加载，同时不影响网站其余部分的用户体验。我最喜欢的一个例子是 Airbnb网站。请注意，可以使用大部分站点，您可以滚动，单击链接，但体验下的区域处于加载状态。这是使用React的正确方法，也是在componentDidMount / componentDidUpdate中完成setState和HTTP请求的原因。

You can also make a component appear as loading while not affecting the user experience on the rest of the site. One of my favorite examples is the Airbnb website. Notice that the majority of the site can be used, you can scroll, click links, but the area under 'experiences' is in a loading state. This is the correct way to use React and is the reason why setState and HTTP requests are done in componentDidMount/componentDidUpdate.

这篇关于在componentDidMount（）之前调用react render（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！