5

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 includes header, sidebar and content. The sidebar is the menu which is different for different type of users so I need to retrieve the menu items on load.

Error I receive is

Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op

Update 4

so i moved my api requests to index.js file and tried to add the condition as mentioned in the comment. Now it just renders Loading... with the same error

    import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import 'core-js/fn/promise';

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


function getJSON(url) {
  return get(url).then(JSON.parse);
}

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
                        username: '',
                        user,
                        loading1: true ,
                        menuList : [],
                        loading2: true
        };
    }

    componentDidMount() {
        let currentComponent = this;

        getJSON('/api/user/get/user/method/user/format/json?quiet=1').then((response) => {
            //console.log(JSON.stringify(response));
            //currentComponent.state.username = response.body.recordset.record[0].name;
            //currentComponent.state.user = response.body.recordset.record[0];
            currentComponent.setState({
                username: response.body.recordset.record[0].name,
                loading1: false
            });
        }).catch(error => {
            console.log('Error', error);
        });

        getJSON('/api/user/get/user/method/menu/format/json?quiet=1').then((response) => {
            console.log(JSON.stringify(response));
            let menuData = response.body.recordset.record;
            let menuList = [];
            var i = 0;
            menuData.container.forEach(menus => {
                menus.sub_modules.forEach(submenu => {
                    menuList.push(<li className="menu" key={i}>{ submenu.title }</li>);
                    i++
                    if (submenu.menuitem.length) {
                        submenu.menuitem.forEach(menuitem => {
                            menuList.push(<li key={i}><a href={menuitem.link}>{ menuitem.title }</a></li>);
                            i++;
                        })
                    }
                })
            });
            currentComponent.setState({
                menuList: menuList,
                loading2: false
            });
        }).catch(error => {
            console.log("Failed!", error);
            $('#myModalError .modal-body').html(error);
            $('#myModalError').modal('show');
        });
    }

    componentWillUnmount() {}

    render() {
        let content = '';
        console.log(this.state);
        if(this.state.loading1 || this.state.loading2) {
            content = <div>Loading...</div>
        }else{
            content =
                <div id="wrapper" className="toggled">
                    <Header username={this.state.username}/>
                    <SideBar menuList={this.state.menuList}/>
                    <HomeContent />
                </div>

        }
        return <div>
                   {content}
               </div>
    }
};

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

enter image description here

here is IE error

IE console error

detailed ie error

sidebar.js

import React, { Component } from 'react';

let menuList = [];
class SideBar extends Component {
    constructor(props){
        super(props);
    }

    render () {
        return (
            <div id="sidebar-wrapper" className="hidden-print">
                <ul className="sidebar-nav">
                {this.props.menuList}
                </ul>
            </div>
        );
    }
}

export default SideBar;

I have created a jsfiddle

webpack

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    entry : [__dirname + '/app/index.js'],
    module: {
         rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            } ,
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader",
                }]
            }
        ],
    },
    output: {
        filename: 'transformed.js',
        path: __dirname + '/docs'
    },
    plugins: [
        HTMLWebpackPluginConfig
    ]
}


{
  "name": "ccp-react",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "private": true,
  "dependencies": {
    "babel-helper-bindify-decorators": "^6.24.1",
    "babel-plugin-lodash": "^3.3.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-syntax-flow": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-react-display-name": "^6.25.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react-optimize": "^1.0.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "bootstrap": "^3.3.7",
    "classnames": "^2.2.5",
    "commander": "^2.12.2",
    "create-react-class": "^15.6.2",
    "cross-env": "^5.1.3",
    "gulp": "^3.9.1",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.4",
    "ng": "0.0.0-rc6",
    "ng-cli": "^0.7.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-icons-kit": "^1.0.7",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-side-bar": "^0.3.5",
    "react-sidenav": "^2.1.2",
    "redux": "^3.7.2",
    "rxjs": "^5.5.6",
    "systemjs": "^0.20.19",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^6.0.95",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-react": "^6.24.1",
    "core-js": "^2.5.3",
    "css-loader": "^0.28.8",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.7.2",
    "protractor": "~5.1.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2",
    "webpack": "^3.10.0",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-dev-server": "^2.9.7"
  }
}

setstate issue still exists even with same code as the one in the fiddle. the fiddle works

setstate

shorif2000
  • 2,582
  • 12
  • 65
  • 137

7 Answers7

4

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 (
            <div>
                <Header />
                <SideBar navlist={this.state.navlist}/>
                <HomeContent />
            </div>
        );
    }
};

ReactDOM.render(<App/>,  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);
      }
toufek khoury
  • 2,974
  • 2
  • 8
  • 15
  • you still get error 'Can only update a mounted or mounting component...'? – toufek khoury Jan 03 '18 at 10:31
  • error is `Failed! TypeError: Cannot set property 'menuList' of undefined` – shorif2000 Jan 03 '18 at 10:45
  • hard to tell where it falls from this debug , one thing you may fix.. menuList.push({ menuitem.title }) .. should be back-tick (` `) around ${menuitem.link} – toufek khoury Jan 03 '18 at 11:19
  • try this instead : `React.createElement("div", { className: "'side-nav-header'" }, menus.title)` – toufek khoury Jan 03 '18 at 13:01
  • you could also add function that does all this logic and call it inside componentDidUpdate. that will be easier to debug – toufek khoury Jan 03 '18 at 13:06
  • same error `Failed! TypeError: Cannot set property 'menuList' of undefined` – shorif2000 Jan 03 '18 at 13:09
  • i still get `Failed! TypeError: Cannot read property 'menuList' of undefined` – shorif2000 Jan 03 '18 at 13:35
  • also `this` in ` console.log(this.menuList);`? (you dont need ' this ' ) – toufek khoury Jan 03 '18 at 13:41
  • try to add if condition to your render that return false if menuList is not defiened , then your return . So the second return wont happen if menuList is undefiened , something like : `render(){ if(!menuList) return false; return(
    ) }`     – toufek khoury Jan 03 '18 at 15:50
  • good good..now we need to know that the first render to your componet wont have your data in your state , so to prevent extra render which may cause us problems , so lets try to setState of some boolean in componentDidMount to true for example and in the construction is false , then we check if we are redy to render correctly , e.g...in constructor `this.state({navlist: [] , loading: true})` ... on the end of componentDidMount: `this.setstate({loading: false})` ... in render(){ `if(this.state.loading) {return
    Loading...
     – toufek khoury Jan 03 '18 at 16:45
  • i tried adding the if statment in render but it throws build error – shorif2000 Jan 03 '18 at 17:22
  • hmm lets try it without `else` and close the `Loading...) } return (
    ); } }`     – toufek khoury Jan 03 '18 at 17:27
  • it fails on the closing brace of if stmt – shorif2000 Jan 03 '18 at 17:43
  • see my update 4. loading shows and then the content loads but it still thows the same error. see last image – shorif2000 Jan 03 '18 at 17:56
2
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.state = { navlist: [] };
    }

  componentDidMount() {
         $.get('api/call')
        .then(( response ) => this.setState({ navlist: response } ));
    }

    render() {
        return (
            <div>
                <Header />
                <SideBar navlist={this.state.navlist}/>
                <HomeContent />
            </div>
        );
    }
};

ReactDOM.render(<App/>,  document.getElementById("app"));
yogesh agrawal
  • 706
  • 7
  • 15
2

Note: I have added a timeout of 2 seconds to simulate API call. so results will be seen after 2 seconds 

const jsonResponse = {
  header: {
    title: "CCP",
    description: "",
    error: true,
    message:
      "Method getMenu Not Implemented in CCP\\Controller\\UserController",
    user: "UddinS2",
    nav: {
      container: [
        {
          title: "Users",
          link: "#",
          theme: "#007c92",
          sub_modules: [
            {
              title: "Getting Started",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "File - CM Template v6.3",
                  link: "/library/templates/FW-LB-CommsMatrix-Template-v6.3.xls"
                },
                {
                  title: "File - Request Access",
                  link: "/library/docs/Requesting_Access_to_CCP.pdf"
                },
                {
                  title: "Video - CCP Promo",
                  link: "/video_ccp.html"
                },
                {
                  title: "Video - CCP Demo",
                  link: "/video_ccp_demo.html"
                },
                {
                  title: "Video - Request Access",
                  link: "/video_request_access.html"
                },
                {
                  title: "Video Tutorials",
                  link: "/video_tutorials.php"
                }
              ]
            },
            {
              title: "General",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "DC Standard Networks",
                  link: "/api/user/dcsn/format/xml"
                },
                {
                  title: "Find Comms Matrix Flow",
                  link: "/find_comms_matrix_flow.php"
                },
                {
                  title: "Find Host",
                  link: "/find_host.php"
                },
                {
                  title: "Find IP Network",
                  link: "/find_network.php"
                },
                {
                  title: "List Comms Matrices",
                  link: "/comms_matrices.php"
                },
                {
                  title: "My Exemption Requests",
                  link: "/api/user/exemption/requests/format/xml"
                },
                {
                  title: "Request Exemption",
                  link: "/request_exemption.php"
                },
                {
                  title: "Services, Projects, ...",
                  link: "/api/user/services/format/xml"
                },
                {
                  title: "View FW Objects",
                  link: "/view_network_service_objects.php"
                },
                {
                  title: "Create Comms Matrix",
                  link: "/create_comms_matrix.php"
                },
                {
                  title: "Comms Matrix Templates",
                  link: "/api/user/commsmatrix/templates"
                },
                {
                  title: "Upload Comms Matrix",
                  link: "/upload_comms_matrix.php"
                },
                {
                  title: "Verify Policy Flow",
                  link: "/verify_policy_flow.php"
                },
                {
                  title: "View Security Policy",
                  link: "/security_zoning_policy.php"
                },
                {
                  title: "View Routing Policy",
                  link: "/routing_domain_policy.php"
                }
              ]
            },
            {
              title: "IP Management",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "Adressing Types",
                  link: "/api/user/iam/addressing/types/format/xml"
                },
                {
                  title: "Cramer Ranges (Live)",
                  link: "/api/user/iam/cramer/ranges/format/xml"
                },
                {
                  title: "Cramer Spool Queue",
                  link: "/api/user/cramer/spool/queue/format/xml"
                },
                {
                  title: "Create Subnet",
                  link: "/iam_create_subnet.php"
                },
                {
                  title: "Subnet Types",
                  link: "/api/user/iam/subnet/types/format/xml"
                },
                {
                  title: "Zone Type Sizes",
                  link: "/api/user/security/zone/type/sizes/format/xml"
                },
                {
                  title: "My Network Diagrams",
                  link: "/api/user/iam/network/diagrams/format/xml"
                },
                {
                  title: "My Subnet Requests",
                  link: "/api/user/subnet/requests/format/xml"
                },
                {
                  title: "Range Assignments",
                  link: "/api/user/iam/range/assignments/format/xml"
                },
                {
                  title: "Upload Network Diagram",
                  link: "/iam_upload_diagram.php"
                }
              ]
            },
            {
              title: "Networks",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "Entity Networks",
                  link: "/api/user/networks/by/entity/format/xml"
                },
                {
                  title: "Frozen Objects",
                  link: "/api/user/frozen/objects/format/xml"
                },
                {
                  title: "IPBB Metadata",
                  link: "/api/user/ipbb/metadata/format/xml"
                },
                {
                  title: "Map Routing Zones",
                  link:
                    "/api/user/routing/domains/mapping/routingzone/format/xml"
                },
                {
                  title: "NITX Trace",
                  link: "/nitx_trace.php"
                },
                {
                  title: "Routing Domains",
                  link: "/api/user/routing/domains/format/xml"
                },
                {
                  title: "Routing Domain Aliases",
                  link: "/api/user/aliases/routing/domains/format/xml"
                },
                {
                  title: "Routing Domains ACL",
                  link: "/api/user/routing/domains/acl/format/xml"
                },
                {
                  title: "Routing Exemptions",
                  link: "/api/user/routing/exemptions/format/xml"
                }
              ]
            },
            {
              title: "Reporting",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "Statistics Dashboard",
                  link: "/statistics_dashboard.php"
                },
                {
                  title: "ECT Statistics",
                  link: "/api/user/connectivity/test/statistics"
                },
                {
                  title: "Exemption Requests",
                  link: "/api/user/report/exemption/requests/format/xml"
                },
                {
                  title: "Exemption Policies",
                  link: "/api/user/report/exemption/policies/format/xml"
                }
              ]
            },
            {
              title: "Security",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "Firewall Network Objects",
                  link: "/firewall_network_objects.php"
                },
                {
                  title: "Firewall Service Objects",
                  link: "/firewall_service_objects.php"
                },
                {
                  title: "Local Market Networks",
                  link: "/api/user/networks/opco/format/xml"
                },
                {
                  title: "Security Exemptions",
                  link: "/api/user/exemptions/format/xml"
                },
                {
                  title: "Security Zones",
                  link: "/api/user/security/zones/format/xml"
                },
                {
                  title: "Security Zone Aliases",
                  link: "/api/user/aliases/security/zones/format/xml"
                },
                {
                  title: "Network Zone Aliases",
                  link: "/api/user/aliases/network/zones/format/xml"
                },
                {
                  title: "Map Security Zones",
                  link: "/api/user/security/zones/mapping/seczone/format/xml"
                },
                {
                  title: "Map Network Zones",
                  link: "/api/user/security/zones/mapping/netzone/format/xml"
                },
                {
                  title: "Security Zones ACL",
                  link: "/api/user/security/zones/acl/format/xml"
                }
              ]
            },
            {
              title: "Audit",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "Firewall Network Objects",
                  link: "/api/user/audit/firewall/network/objects/format/xml"
                },
                {
                  title: "Firewall Service Objects",
                  link: "/api/user/audit/firewall/service/objects/format/xml"
                },
                {
                  title: "Security Zones",
                  link: "/api/user/audit/security/zones/format/xml"
                },
                {
                  title: "Security Zones ACL",
                  link: "/api/user/audit/security/zones/acl/format/xml"
                },
                {
                  title: "Security Zones Aliases",
                  link: "/api/user/audit/security/zone/aliases/format/xml"
                },
                {
                  title: "Security Zone Mappings",
                  link: "/api/user/audit/security/zone/mapping/format/xml"
                },
                {
                  title: "Network Zone Aliases",
                  link: "/api/user/audit/network/zone/aliases/format/xml"
                },
                {
                  title: "Routing Domains",
                  link: "/api/user/audit/routing/domains/format/xml"
                },
                {
                  title: "Routing Domains ACL",
                  link: "/api/user/audit/routing/domains/acl/format/xml"
                },
                {
                  title: "Routing Domain Aliases",
                  link: "/api/user/audit/routing/domain/aliases/format/xml"
                },
                {
                  title: "Routing Domain Mappings",
                  link: "/api/user/audit/routing/domain/mapping/format/xml"
                }
              ]
            }
          ]
        },
        {
          title: "Site Administration",
          link: "#",
          theme: "#007c92",
          sub_modules: [
            {
              title: "Content Management",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "Business Units",
                  link: "/api/user/businessunits/format/xml"
                },
                {
                  title: "Entities",
                  link: "/api/user/entities/format/xml"
                },
                {
                  title: "Locations",
                  link: "/api/user/locations/format/xml"
                },
                {
                  title: "Markets",
                  link: "/api/user/markets/format/xml"
                },
                {
                  title: "Service Domains",
                  link: "/api/user/servicedomains/format/xml"
                }
              ]
            },
            {
              title: "Health Check",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "Networks Status",
                  link: "/api/user/networks/status/format/xml"
                }
              ]
            },
            {
              title: "User Management",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "Assign Group Privilges",
                  link: "/assign_group_privs.php"
                }
              ]
            },
            {
              title: "Troubleshooting",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "Debug Comms Matrix",
                  link: "/debug_comms_matrix.php"
                },
                {
                  title: "Mocha Tests",
                  link: "/testrunner.php"
                }
              ]
            },
            {
              title: "Super Admin",
              link: "#",
              theme: "#007c92",
              menuitem: [
                {
                  title: "Sudo Group Access",
                  link: "/sudo_group_access.php"
                }
              ]
            }
          ]
        }
      ]
    },
    server: 1,
    version: "17.1",
    timestamp: 1514902917
  },
  body: []
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      navList: []
    };
  }

  componentDidMount() {
    //$.get('/api/user/get/user/method/menu/format/json')
    //.done ((response) => console.log(response));
    //.done(( response ) => this.setState({ navlist: //response } ));
    //dont have actual api hence setting state with response data mentioned in question
    setTimeout(() => {
      this.setState({
        navList: jsonResponse
      });
    }, 2000);
  }

  componentWillUnmount() {}

  render() {
    //removing header and HomeContent as definition is not there
    return (
      <div>
        <SideBar navlist={this.state.navList} />{" "}
      </div>
    );
  }
}
let SideBar = props => {
  const { navlist } = props;
  let navlistView = null;
  const getMenuItems = menuItemsArray => (
    <ul>
      {"       "}
      {menuItemsArray.map((element, index) => (
        <li key={index}>{element.title} </li>
      ))}
    </ul>
  );
  const getSubMenu = subMenuArray => (
    <div>
      {" "}
      {subMenuArray.map((element, index) => (
        
        <ul key={index}>-- - {element.title}
        { <li>
           {getMenuItems(element.menuitem)}
          </li>
       }
        </ul>
      ))}
    </div>
  );
  const getView = () => {
    let navlistView = null;
    if (navlist.header) {
      const navInfo = navlist.header.nav.container;
      navlistView = navInfo.map((navlist, index) => (
        <div key={index}>
        {navlist.title}
        <div>
        {getSubMenu(navlist.sub_modules)}
        </div>
        </div>
      ));
    }
    return navlistView;
  };

  return (
    <div id="sidebar-wrapper" className="hidden-print">
      {" "}
      {getView()}{" "}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>
For first error
Failed! TypeError: Cannot read property 'setState' of undefined
issue : callback doesnot have correct context.


Failed! TypeError: Cannot read property 'menuList' of undefined
This is also context issue as getJson is called with new context.

I am working on linux os , dont have IE , So I haven't checked on IE. i have used index as the keys because i don't have have any unique id. Please check what unique id you can set as keys.

simbathesailor
  • 3,681
  • 2
  • 19
  • 30
  • 1
    have made some changes to fiddle . https://jsfiddle.net/emmwg9Lq/1/ menu are being shown now. One thing i want to tell you , that i am not much clear about the structure. what is menuData , menuList and various variables you have used in your code. So try to understand from fiddle code and implement is accordingly. No need to iterate through the array if you alread created react element , direcly return it. structure your code in a better way. make clean components which are responsinble for one thing , not many .see the fiddle that i mentioned here. – simbathesailor Jan 08 '18 at 11:04
  • Please go through this article https://reallifeprogramming.com/how-to-structure-components-in-react-54fc43e71546 – simbathesailor Jan 08 '18 at 11:06
  • `menuData` was the subset data from returned api call and `menuList` is array of menu items which i want to display on the page which i create from looping through `menuData` – shorif2000 Jan 08 '18 at 11:18
  • i noticed in your link the `menuList` is not being set from Promise but using the defualts. i need it to be set by the Promise. can you take a look at this https://jsfiddle.net/shorif2000/kzpj5p8m/ – shorif2000 Jan 08 '18 at 11:25
  • also when i copy this into my server compile build run it seems to send every ajax requests twice – shorif2000 Jan 08 '18 at 11:34
  • in jsfiddle the state error does not show but in my env it does, so i must assuem it must be somethign to do with webpack and packages? this is workign without errors and multiple json calls https://jsfiddle.net/shorif2000/gabgc28e/ – shorif2000 Jan 08 '18 at 11:51
  • wow finally!!! now regarding multiple calls, Please check the type of http request. mostly you have one option call and one get or post call. these call are called preflight calls , that is not an issue. – simbathesailor Jan 08 '18 at 12:21
  • the issue with the setstate is still present in my env and i have teh exact same code as that fiddle – shorif2000 Jan 08 '18 at 12:23
  • what kind of issue . Please tell – simbathesailor Jan 08 '18 at 12:24
  • see the picture i took screenshot of – shorif2000 Jan 08 '18 at 12:27
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162739/discussion-between-stack26-and-shorif2000). – simbathesailor Jan 08 '18 at 12:27
  • @shorif2000 see the chat link above . i have commented in chat – simbathesailor Jan 09 '18 at 02:41
  • i am in the chat window, my code looks like yours. but still doesn't work. can it be the webpack, babel version etc that i am using? – shorif2000 Jan 09 '18 at 11:27
  • Is it solved? very difficult to tell what specific thing is failing. Please check some other part of the code , other that the code you showed us that may be updating the state of an unmounted component. – simbathesailor Jan 11 '18 at 12:29
  • the code i have shown is basically everything i have in React. I have been tryig to create a simple home page with menulist from api – shorif2000 Jan 15 '18 at 09:40
0

You have a setState in your componentDidMount. That creates a loop where your component will keep mounting itself forever (since setState eventually leads to componentDidMount being called), which is why React prevents it. The data you get through getJSON should only update the state, not be passed on to one of React's rendering phases. When the state is updated, then your component should re-render automatically. Most of the logic you have in componentDidMount should be in your render function, formatting the data so it can then be used by the return command below.

frandroid
  • 1,343
  • 16
  • 26
  • are you able to provide sample code, i have jsfiddle in the question – shorif2000 Jan 09 '18 at 11:32
  • here is my updated fiddle https://jsfiddle.net/shorif2000/gabgc28e/ it works fine there but in my environment it throws up that error and runs api calls twice – shorif2000 Jan 10 '18 at 10:14
0

You will try this 

     fetch(url)
        .then((response) => {
               let jsonData=response.json();
               this.setState({data:jsonData})
         })
        .catch((error) => {
               console.log("error---",error);
         })
SM Chinna
  • 341
  • 2
  • 7
0

I would move the logic of your get request into componentWillMount. The React error is telling you that the promise can only be called in a "Mounting component". Then you can call setState. Then in your render you can conditionally render based on the state variable.

{this.state.navList.length &&
         <div>
            <Header />
            <SideBar navlist={this.state.navlist}/>
            <HomeContent />
        </div>}

You can also render a different loading component while you wait for the data to return.

Rob Bruhn
  • 1
  • 1
  • 3
0

seems like the issue was separating the code properly in different files. I had index, App with componentDidMount() all in one which was not working.

so i have done

index

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { BrowserRouter, Route, browserHistory } from 'react-router-dom';
import promise from 'redux-promise';

import App from './App'
import reducers from './reducers';

require("babel-core/register");
require("babel-polyfill");

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
        <Provider store={createStoreWithMiddleware(reducers)}>
            <BrowserRouter history={browserHistory}>
                <App/>
            </BrowserRouter>
        </Provider>
        , document.getElementById('root'));

App

import React, { Component } from 'react'
import { HashRouter, Switch, Route, Link } from 'react-router-dom';
import Header from './components/header';
import Logout from './components/logout';
import SideBar from './components/sidebar';
import HomeContent from './components/home';
import Ldapuser from './components/ldapuser';
import AdminContent from './components/getting_started/admin';

const Main = () => (
    <main>
     <Switch>
       <Route exact path='/index.html' component={HomeContent}/>
       <Route exact path='/home' component={HomeContent}/>      
       <Route path='/logout' component={Logout}/>
       <Route path='/ldapuser' component={Ldapuser}/>
       <Route path='/admin/content' component={AdminContent}/>
     </Switch>
    </main>
)

class App extends Component {

    render() {
        return (
            <div>
                <Header />
                <SideBar />
                <Main />
             </div>
        );
    }
}

export default App;

and the individual files... header etc will have componentDidMount() which now works

shorif2000
  • 2,582
  • 12
  • 65
  • 137