Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is componentDidMount not being called when I re-render?

Tags:

reactjs

I have multiple modals for signing up, and having trouble with it. I have three actions in total. First the register button which then activates the first register modal to either sign up with google or facebook, then after that completes the modal for additional information which could not be gathered by the provider will appear with pre-filled inputs gathered form provider. I render the two modals when I render the application and only show it when the register button is clicked. I need the componentDidMount to be called after I complete the facebook or google login, but it was called when I rendered the modals when the app fist started. The buttons hit action reducers and reducers changing the state of type bool on wether to show the modal or not.

class HeaderRegisterButton extends Component {
   render() {
     return(
       <div>
         <Register1/>
         <Register2/>
       </div>
     );
   }
 }

Register Modal 1

class Register1 extends Component {
   render() {
     return(
       <div>
        <button onClick={() => this.props.showRegister2()} /> //This would hit the action reducer to get initial info and change the bool to show register 1 to false and register 2 to true.
       </div>
     );
   }
 }

Register Modal 2

import { reduxForm, Field, initialize } from 'redux-form';

class Register2 extends Component {

  componentDidMount() {
    hInitalize() //only called when the app fires, not when the state changes in the action reducer to change bool to show this modal.
  }

  hInitalize() {
   var initData = {};
  const initData = {
   "name" = this.props.name//name stored inside redux store
  };
  this.props.initialize(initData)
  }



   render() {
     return(
       <div> 
        //Code to display the modal which works.
       </div>
     );
   }
 }
like image 884
joethemow Avatar asked Feb 21 '17 04:02

joethemow


People also ask

Is componentDidMount called after every render?

There is no call to ComponentDidMount. It is only called once after the initial render.

Why is componentDidMount not called?

If the error occurs before componentDidMount gets called such as in your render function, you won't see the console log. Try commenting out the code in your render function and see if it appears. Show activity on this post. In my case, I imported a component without the export default command in the imported file.

How do I trigger componentDidMount?

You shouldn't try to trigger componentDidMount on click because componentDidMount is executed only once in the lifecycle of the component, immediately after a component is mounted. You should change onBtNext() function to fetch the data.

Is componentDidMount called before render?

The componentDidMount() method is called after the component is rendered. This is where you run statements that requires that the component is already placed in the DOM.


Video Answer


1 Answers

componentDidMount is only called once in the lifecycle of any component, re-render will not reinitialize the component. componentDidUpdate will be called where you can manage your logic.

like image 116
Gurdev Singh Avatar answered Sep 21 '22 16:09

Gurdev Singh