react warning cannot set state when using promises

Question

I\'m trying to query the server to get list of nav items so I can build my menu on init. I\'ve so far managed to create a static page with 3 contents on the home page, which

Answer 1

try to check if the componenet mounted before you update:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import SideBar from './components/sidebar';
import Header from './components/header';
import HomeContent from './components/home';

class App extends Component {
    constructor(props){
        super(props);
        this.mountCheck = false;
        this.state = { navlist: [] };
    }

    componentWillMount() {
        this.mountCheck = true;
    }
    componentWillUnmount() {
        this.mountCheck = false;
    }

    componentDidMount() {
         $.get('/api/user/get/user/method/menu/format/json')
        .done(( response ) => this.setState({ navlist: response } ));
    }

    render() {
        return (
            

                

                
                
            
        );
    }
};

ReactDOM.render(,  document.getElementById("app"));

also you can add shouldComponentUpdate to improve performance and reduce wastful rendering e.g:

shouldComponentUpdate(nextProps, nextState) {
    if (this.state.navlist !== nextState.navlist) {
      return true;
    }
    return false;
  }

see https://reactjs.org/docs/optimizing-performance.html

deep compare check for better performance results you can use it with isEqual's lodash :

shouldComponentUpdate(nextProps, nextState) {
        return !isEqual(this.state, nextState);
      }