Cannot update a component (`AppContextProvider`) while rendering a different component

mnoel2 — Mon, 13 Feb 2023 02:47:53 GMT

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>

{state.showMap ? (

[]

) : (

dispatch({

type: 'SHOW_MAP',

payload: {

showMap: true,

container: mapDiv.current,

})

)}

</div>

</MainContainer>

</div>

);

}

export default App;

Re: Cannot update a component (`AppContextProvider`) while rendering a different component

ReneRubalcava — Mon, 13 Feb 2023 15:31:30 GMT

That sample is incredibly outdated at this point, and the material lib used is now deprecated.

This demo app use nextjs and redux

https://github.com/odoe/jsapi-nextjs

This demo app uses nextjs, trpc, tailwind

https://github.com/odoe/arcgis-create-t3-app

And we have a more basic React application too

https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-react

These samples are much more representative of modern react apps

topic Cannot update a component (`AppContextProvider`) while rendering a different component in ArcGIS JavaScript Maps SDK Questions

Cannot update a component (`AppContextProvider`) while rendering a different component

Re: Cannot update a component (`AppContextProvider`) while rendering a different component