CODEWITHSUNDEEP
reactjsredux
Sergio Reis
Sergio Reis

Reputation: 3296

componentWillReceiveProps seems to be called twice

In my react project, the componentWillReceiveProps() function seems to be called twice, but not sure what the problem is.

Here is the code.

import React, { Component, PropTypes } from 'react';
...

class MessagesList extends Component {

constructor(props) {
    super(props);
    this.state = {
        message: '',
        messages: []
    };

...

componentWillMount() {
    this.props.init_message();
};

componentWillReceiveProps(nextProps) {
    this.setState({
        messages: this.props.user.messages
    });
    var msgs = this.props.user.messages;
    var total_group = [];
    var msg_group = [];
    var group_date = 0;
    setTimeout(() => {
        if (typeof msgs != 'undefined') {
            for(var i = 0; i < msgs.length; i++) {
                ...
            }
        }                 
    }, 100);
};

render() {
    return (
        <div className="row">
            <div className="col-12">
                <div className="messages">
                    {this.state.messages.map(message => {
                        return (
                            <div>{message.user}: {message.message} : {message.date}</div>
                        )
                    })}
                </div>
            </div>
            ...
        </div>
    );
}
}

I was going to read the msgs.length in the componentWillReceiveProps(), I got the following issue.

msgs.length is undefiend

After that I got the values of array, so I think the componentWillReceiveProps() seems to be called twice. So in the first call, can't read the value and then in the second call, read the value at least.

Please help me.

Upvotes: 0

Views: 1681

Answers (2)

Thomas
Thomas

Reputation: 131

ComponentWillReceiveProps is a method from the growth/update phase of the React lifecycle.

The Growth phase is triggered in three different ways: changing of props, changing of state or calling forceUpdate().

The value you are referring to in componentWillReceiveProps, this.props.user.messages, is the current value not the nextProps value.

Also something to consider is that the setState method is actually an asynchronous function. So when that setting of state takes place, it will cause another rerender.

I suspect, but I cannot be sure without more of your code, that setState is called once with your original value from props which triggers another update cycle. During this next update cycle the setState method now sets state to the new prop values.

Are you perhaps meaning to use nextProps.user.messages instead of this.props.user.messages?

Upvotes: 1

princesust
princesust

Reputation: 148

componentWillReceiveProps is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

Note that if a parent component causes your component to re-render, this method will be called even if props have not changed. Make sure to compare the current and next values if you only want to handle changes.

You will get the details from react docs.

Upvotes: 1

Related Questions