componentWillReceiveProps not firing

问题

In my other classes, componentWillReceiveProps was working nicely, but for some reason, it isn't firing here.

ItemView.jsx

class ItemView extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: null, 
            rating: null, 
            sector: null, 
            location: null, 
            description: null, 
            image: "blank.png",
            show: false
       };
    }

    ...

    componentWillReceiveProps(nextProps) {

        if(!nextProps.companyToRender) {
            this.setState({
                name: null, 
                rating: null, 
                sector: null, 
                location: null, 
                description: null, 
                image: "blank.png",
                show: false
            });
       }
       else {
           var companyToRender = nextProps.companyToRender;

           this.setState({
               name: companyToRender.name, 
               rating: companyToRender.rating, 
               sector: companyToRender.sector, 
               location: companyToRender.location, 
               description: companyToRender.description, 
               image: companyToRender.image,
               show: true
           });
    }

    ...

    render () {
       return(
        <div>
         ...
        <CommentBox show={this.state.show} companyToRender={this.state.name}/>
         ...
        </div>
       );

    }
}

CommentBox.jsx

class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {companyToRender: null};
    }

    componentWillReceiveProps(nextProps) {
        this.setState({companyToRender: nextProps.companyToRender});
    }

    ...
}

The prop passed to itemView is either null if nothing is to be passed, or the array that ItemView is assigning to it.

componentWillReceiveProps() fires only when the state's attributes become null, but not when it sets. ( (null --> entry) doesn't work but (entry --> null) works).

Am I missing out on something? Thanks!

-- edit:

(null --> entry) updates state, but doesn't call the logs or any subsequent componentWillRecieveProps(). (But entry --> null does.)

Logs for null --> entry

Logs for entry --> null

回答1:

After much painful debugging, I found out that the problem was that ItemView was being called inside a modal (react-bootstrap) which for some reason, doesn't support componentWillReceiveProps(). Ended up fixing the issue by refactoring the code. Thanks guys!

回答2:

If anyone else is having a problem with this...

componentWillReceiveProps will not be called if you are receiving the exact same props as before. What you can do to get around it is add a dummy prop that iterates every time you want to send the same prop to the component in case that component internally resets itself somehow

click() {
    this.setState({counter: ++this.state.counter, unchangingProp:true})
}
<Component unchangingProp={this.state.unChangingProp} counter={this.state.counter}/>

This way componentWillRecieveProps will be triggered every time.

回答3:

In my case my component was being re-created every render, so I had to put my logic in the constructor. I know its not ideal but it was a simple component and was easier for me to do than try to fix the issue that was causing the component to get re-created each time.

回答4:

i also had the same problem. if someone typed in a direct url the componentwillreceiveprops did not fire. i had to refactor my code as well to get it all working.

Changes i made was in my initial index.tsx having something like (i.e. have the router as the outer element):

render( 
<Router history={hashHistory} >
{routes}
</Router>
, document.getElementById('root'));

my default route was to my app.tsx page with a structure as follows: render() {

return (
 <Provider store={store}>
   <div id="appContainer">
           {this.props.children}
   </div>
 </Provider>
);

}

来源：https://stackoverflow.com/questions/40325715/componentwillreceiveprops-not-firing