反应应该componentUpdate太多的递归

Question

I'm building a dashboard with auto-update every few seconds using React. I'm getting the properties from an Ajax call and passing them to the components, which until now has been working fine.

In one of the components, I need to set the image source that gets updated every x seconds automatically but in this case I need to use state.

This is my component:

var ImageContainer = React.createClass({

    getInitialState: function(){
        return { src: this.props.initialImage};
    },

    shouldComponentUpdate: function(nextProps, nextState){
        this.setState({ src: this.props.initialImage });
        return true;
    },  

    render: function() {
        return (
            <div className="col-md-8 col-sm-12 nopadding post-image vcenter" >
                <img src={this.state.src} className="img-responsive center-cropped"/>
            </div>
        );

    }
});

This works good but gives too much recursion error .

Did a search and found this answer advising to use componentWillReceiveProps to set the state, but when I use it, the image is not updated on the first auto-fresh, only on the second.

Here's the current flow after I implement componentWillReceiveProps :

• Ajax receives call result, let's say data A
• Call state is passed to two components, the image and the text
• Initial call >> Image data A, Text data A
• Component refresh to get data B >> Image data A, text data B
• Component refresh to get data C >> Image data B, text data C

...and so on. Can you help me understand why this happens?

Note: I need to use state because there's the need to run a check on componentDidMount to confirm the image is valid

Answer 1

I have had similar issues with componentWillReceiveProps in the past. It is assumed that if it is called it has new props and it seems it isn't always the case.

See: https://facebook.github.io/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html

The recursion will probably be due to setting state in shouldComponentUpdate without returning false to stop the render. It may be worth trying something along the lines of:

shouldComponentUpdate: function(nextProps, nextState) {
   this.setState({ src: nextProps.initialImage });
   return nextProps.initialImage !== this.props.initialImage;
}

By adding a condition that compares the old props and state to their replacements, it should stop recursion.

NOTE: I haven't been able to test this code, so maybe off