Select to view content in your preferred language

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

884
1
02-12-2023 06:47 PM
mnoel2
by
Occasional Contributor

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;
 

 

 

0 Kudos
1 Reply
ReneRubalcava
Honored Contributor

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

0 Kudos