Source:  Twitter logo

I set up a new react project and for some reason, the componentDidMount method is not being called.

I have verified this behavior by placing a call to console.log in componentDidMount but I cannot see its output in the console.

Furthermore, this.setState() is not working.

I'm pretty stumped as to why the componentDidMount is not being called. I tried using both React "v0.14.0" and "v0.14.3".

Why is 'componentDidMount' not being called?

Code:

var React = require('react');

var RecipePage = React.createClass({
  componentDidMount: function() {
    console.log('mounted!');
  },
  render: function() {
    return (
      <div>Random Page</div>
    );
  }
});

module.exports = RecipePage;

In my case, there was another componentDidMount earlier in the code

12 users liked answer #0dislike answer #012
user5480949 profile pic
user5480949

This happened to me when I had componentWillMount() defined 2x in the same class. This did not produce a runtime error. I simply removed the second definition and things started working.

53 users liked answer #1dislike answer #153
P.Brian.Mackey profile pic
P.Brian.Mackey

In my case, I call componentDidMount() for retrieving data from a service (API call) and on the render function I have components that are supposed to use the data that is returned from this call.

But because the call is Async the render() function is called immediately and then it crashes (many errors like: "TypeError:cannot read property 'XXXX' of undefined" ) then it looks like componentDidMount is not called at all.

To solve this issue I check on render that myData !== null before returning the component itself - You can use generic loader\spinner on this case that will not render internal components that use data before the data that actually retrieve from service.

Example:

componentDidMount() {
    const { GetMyDataFromServiceFunc } = this.props;

    GetMyDataFromServiceFunc ("150288");
}

render() {
    const { details, loading } = this.props;
    
    if (!details)
        return (<GenericLoader />);
        
        return (

        <FullScreenModal
            <Wizard className="order-new-wizard">

                <Component1 editable={false} dataToComponent1={details}
                    goNextStep={this.goNextStep} /> 

                <Component2 values={details.customerDetail} goNextStep={this.goNextStep} />
            </Wizard>
        </FullScreenModal>
        );
    }
}
4 users liked answer #2dislike answer #24
Yohan profile pic
Yohan

So... lo and behold.... I finally got it working(with the help of a back-end expert). The reason why the "componentDidMount" methods weren't firing was because my server was bundling and serving all the react + html stuff on server side. (Only "render" and "getInitialState" methods get called to create the "html" template that gets delivered through the client's browser...but it stops there because it thinks it's finished)

The fix: Find a way to deliver the resulting "compiled" html through the server AND in addition, allow react's own events to be accessible and "fireable" again on the client side. When compiling my "view" file( index.js or index.html ), I included an "Application.start()" script that injects my bundle.js code into the template again. Then in my gulpfile, exported the "Application" variable so the "view" file can access it.

Gahh...pulled my hair out for this. Time to read up on server side vs. client side rendering

28 users liked answer #3dislike answer #328
user3295436 profile pic
user3295436

For me, the reason was upper case "C" in ComponentDidMount.

Changed it to componentDidMount and it worked

1 users liked answer #4dislike answer #41
Ankur Marwaha profile pic
Ankur Marwaha

For me I also declared componentDidUpdate in the class after that componentDidMount started firing as expected.

1 users liked answer #5dislike answer #51
Shounak Bose profile pic
Shounak Bose

You need to change your module.exports to point at RecipePage not TestPage

module.exports = RecipePage;
3 users liked answer #6dislike answer #63
yangli-io profile pic
yangli-io

I have the create-react-app template. I added the ComponentDidMount into the App Component. I put a console.log and an alert into it. It does not fire and there are no errors in React or the browser. I tried in chrome and firefox.

FIX: what worked for me was rebooting my pc. Then it started working. I do not know why, but this resolve the issue.

Update: Not I have an uppercase 'C' it is 'componentDidMount' not 'ComponentDidMount'.. I think it's time for sleep.

4 users liked answer #7dislike answer #74
Sigex profile pic
Sigex

In my case, I imported a component without the export default command in the imported file. When I fixed this, componentDidMount started firing...

0 users liked answer #8dislike answer #80
King James Enejo profile pic
King James Enejo

For me, I had onComponentDidMount() instead of componentDidMount() facepalm

0 users liked answer #9dislike answer #90
Marlo profile pic
Marlo

Although you have a console log statement in your componentDidMount function it may not be executing because that function never gets run. 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.

0 users liked answer #10dislike answer #100
nflauria profile pic
nflauria

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).