CODEWITHSUNDEEP
reactjs
kennet postigo
kennet postigo

Reputation: 525

componentDidMount() not being called when react component is mounted

I've been attempting to fetch some data from a server and for some odd reason componentDidMount() is not firing as it should be. I added a console.log() statement inside of componentDidMount() to check if it was firing. I know the request to the server works as it should As I used it outside of react and it worked as it should.

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      obj: {}
    };
  };

  getAllStarShips () {
    reachGraphQL('http://localhost:4000/', `{
     allStarships(first: 7) {
       edges {
         node {
           id
           name
           model
           costInCredits
           pilotConnection {
             edges {
               node {
                 ...pilotFragment
               }
             }
           }
         }
       }
     }
    }
    fragment pilotFragment on Person {
     name
     homeworld { name }
   }`, {}). then((data) => {
     console.log('getALL:', JSON.stringify(data, null, 2))
      this.setState({
        obj: data
      });
   });
  }

  componentDidMount() {
    console.log('Check to see if firing')
    this.getAllStarShips();
  }

  render() {
    console.log('state:',JSON.stringify(this.state.obj, null, 2));
  return (
    <div>
      <h1>React-Reach!</h1>
      <p>{this.state.obj.allStarships.edges[1].node.name}</p>
    </div>
  );
}

}

render(
  <App></App>,
  document.getElementById('app')
);

Upvotes: 17

Views: 44727

Answers (4)

Gus T Butt
Gus T Butt

Reputation: 197

Also check that you don't have more than one componentDidMount if you have a component with a lot of code. It's a good idea to keep lifecycle methods near the top after the constructor.

Upvotes: 2

Arvind
Arvind

Reputation: 93

I encountered this issue (componentDidMount() not being called) because my component was adding an attribute to the component state in the constructor, but not in the Component declaration. It caused a runtime failure.

Problem:

class Abc extends React.Component<props, {}> {
    this.state = { newAttr: false }; ...

Fix:

class Abc extends React.Component<props, {newAttr: boolean}> {
    this.state = { newAttr: false }; ...

Upvotes: 0

Jon
Jon

Reputation: 3502

Check your component's key

Another thing that will cause this to happen is if your component does not have a key. In React, the key property is used to determine whether a change is just new properties for a component or if the change is a new component.

React will only unmount the old component and mount a new one if the key changed. If you're seeing cases where componentDidMount() is not being called, make sure your component has a unique key.

With the key set, React will interpret them as different components and handle unmounting and mounting.

Example Without a Key:

<SomeComponent prop1={foo} />

Example with a Key

const key = foo.getUniqueId()
<SomeComponent key={key} prop1={foo} />

Upvotes: 6

Jim Pedid
Jim Pedid

Reputation: 2780

The issue here is that the render method is crashing, because the following line is generating an error

<p>{this.state.obj.allStarships.edges[1].node.name}</p>

Fix this to not use this.state.obj.allStarships.edges[1].node.name directly, unless you can guarantee that each receiver is defined.

Upvotes: 17

Related Questions