I'm using Rene Rubacalva example in jsapi-esm-react/AppContext.js at main · odoe/jsapi-esm-react · GitHub
I'm getting the following error:
Warning: Cannot update a component (`AppContextProvider`) while rendering a different component (`App`). To locate the bad setState() call inside `App`, follow the stack trace as described in
//code
//AppContext
import React, { createContext, useEffect, useReducer, useRef } from 'react';
export const AppContext = createContext();
//const elRef = useRef(null);
const initialState = {
showMap: false,
container: null,
};
function reducer(state, { type, payload }) {
switch (type) {
case 'SHOW_MAP':
return {
...state,
showMap: payload.showMap,
container: payload.container,
};
default:
return state;
}
}
const AppContextProvider = (props) => {
const [state, dispatch] = useReducer(reducer, initialState);
const value = { state, dispatch };
useEffect(() => {
}, []);
useEffect(() => {
const loadMap = async () => {
//const map = await import("./data/webmap")
const { initialize } = await import('./data/webmap');
//map.initialize()
const { container} = state;
await initialize(container);
};
if (state.showMap) {
loadMap();
}
}, [state]);
return <AppContext.Provider value={value}>{props.children}</AppContext.Provider>;
};
export default AppContextProvider;
//App.jsx
import { AppContext } from './AppContext ';
function App() {
const { state, dispatch } = useContext(AppContext);
const mapDiv = useRef(null);
useEffect(() => {
if (mapDiv.current) {
/**
* Initialize application
*/
const info = new OAuthInfo({
appId: "abc",
portalUrl: "https://<server>/portal/",
popup: false,
});
esriId.registerOAuthInfos([info]);
esriConfig.portalUrl = "https://<server>/portal";
esriId.checkSignInStatus(esriConfig.portalUrl + "/sharing").then(
function () {
DisplayForm();
},
function (error) {
console.log(error);
}
);
esriId.getCredential(esriConfig.portalUrl + "/sharing").then(function (creds) {
console.log(creds);
});
esriId.destroyCredentials();
debugger;
DisplayForm();
}
}, []);
console.log("map is loading");
return (
<div>
<MainContainer maxWidth={state.showMap ? 'lg' : 'sm'}>
<div className="mapDiv" ref={mapDiv} style={{ width:'100vw', height:"100vh"}}>
{state.showMap ? (
[]
) : (
dispatch({
type: 'SHOW_MAP',
payload: {
showMap: true,
container: mapDiv.current,
},
})
)}
</div>
</MainContainer>
</div>
);
}
export default App;
