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 ponent. This usually means you called setState, replaceState, or forceUpdate on an unmounted ponent. 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 ment. 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 './ponents/sidebar';
import Header from './ponents/header';
import HomeContent from './ponents/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
};
}
ponentDidMount() {
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');
});
}
ponentWillUnmount() {}
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"));
here is 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",
"mander": "^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
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 ponent. This usually means you called setState, replaceState, or forceUpdate on an unmounted ponent. 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 ment. 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 './ponents/sidebar';
import Header from './ponents/header';
import HomeContent from './ponents/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
};
}
ponentDidMount() {
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');
});
}
ponentWillUnmount() {}
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"));
here is 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",
"mander": "^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
Share Improve this question edited Jan 10, 2018 at 10:54 shorif2000 asked Jan 2, 2018 at 14:24 shorif2000shorif2000 2,65414 gold badges73 silver badges145 bronze badges 9-
are you using
setStateinsideHeaderandHomeContentponent, if yes can you show those ponents? – Mayank Shukla Commented Jan 2, 2018 at 14:32 - i am only using it in sidebar.js and is being set in index.js as pasted above – shorif2000 Commented Jan 2, 2018 at 14:45
-
Is your API endpoint
/api/user/get/user/method/menu/format/jsonor you need to send headers – Shubham Khatri Commented Jan 4, 2018 at 17:29 - i am retrieveing data from here to build up my menu list – shorif2000 Commented Jan 5, 2018 at 9:27
- After reviewing your code, it seems the issue could be that you are passing DOM elements to your Sidebar. Can you please add your Sidebar code to your question for inspection? – Aaron Franco Commented Jan 6, 2018 at 15:13
7 Answers
Reset to default 4try to check if the ponenet mounted before you update:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SideBar from './ponents/sidebar';
import Header from './ponents/header';
import HomeContent from './ponents/home';
class App extends Component {
constructor(props){
super(props);
this.mountCheck = false;
this.state = { navlist: [] };
}
ponentWillMount() {
this.mountCheck = true;
}
ponentWillUnmount() {
this.mountCheck = false;
}
ponentDidMount() {
$.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/docs/optimizing-performance.html
deep pare check for better performance results you can use it with isEqual's lodash :
shouldComponentUpdate(nextProps, nextState) {
return !isEqual(this.state, nextState);
}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SideBar from './ponents/sidebar';
import Header from './ponents/header';
import HomeContent from './ponents/home';
class App extends Component {
constructor(props){
super(props);
this.state = { navlist: [] };
}
ponentDidMount() {
$.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"));
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_ms_matrix_flow.php"
},
{
title: "Find Host",
link: "/find_host.php"
},
{
title: "Find IP Network",
link: "/find_network.php"
},
{
title: "List Comms Matrices",
link: "/ms_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_ms_matrix.php"
},
{
title: "Comms Matrix Templates",
link: "/api/user/msmatrix/templates"
},
{
title: "Upload Comms Matrix",
link: "/upload_ms_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_ms_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: []
};
}
ponentDidMount() {
//$.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);
}
ponentWillUnmount() {}
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./ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare./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.
You have a setState in your ponentDidMount. That creates a loop where your ponent will keep mounting itself forever (since setState eventually leads to ponentDidMount 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 ponent should re-render automatically. Most of the logic you have in ponentDidMount should be in your render function, formatting the data so it can then be used by the return mand below.
You will try this
fetch(url)
.then((response) => {
let jsonData=response.json();
this.setState({data:jsonData})
})
.catch((error) => {
console.log("error---",error);
})
I would move the logic of your get request into ponentWillMount. The React error is telling you that the promise can only be called in a "Mounting ponent". 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 ponent while you wait for the data to return.
seems like the issue was separating the code properly in different files. I had index, App with ponentDidMount() 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, bineReducers } 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 './ponents/header';
import Logout from './ponents/logout';
import SideBar from './ponents/sidebar';
import HomeContent from './ponents/home';
import Ldapuser from './ponents/ldapuser';
import AdminContent from './ponents/getting_started/admin';
const Main = () => (
<main>
<Switch>
<Route exact path='/index.html' ponent={HomeContent}/>
<Route exact path='/home' ponent={HomeContent}/>
<Route path='/logout' ponent={Logout}/>
<Route path='/ldapuser' ponent={Ldapuser}/>
<Route path='/admin/content' ponent={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 ponentDidMount() which now works