Trying to refactor to next.js for pre-rendering and SSR. Unfortunately, the React State is playing games with me.
Inside of index.js, I'm loading a JSON file with all of the content for the website. I have a function called from componentDidMount() which loads this JSON file and calls setState(). The problem that I'm having is that it isn't passing in this updatedState to the render function of my component. What's even weirder, is that when I console log the state inside this component, I'm getting the expected value (the content from the JSON) in the browser. However, next.js also console logs to the terminal my server is running on, and it's logging the empty state object thats initialized in the constructor.
Moreover, the Component Inspector in React Dev Tools is reflecting the proper state. But none of my sub components from Index are receiving this correct state.
TLDR: State is being loaded properly and reflecting inside of chrome, however in the server terminal it's the empty object thats initialized in the constructor. None of my components are receiving the state as props and its causing everything to not mount properly and be empty.
The next-js refactor is on branch 'nextjs-refactor' and is in a folder called next-version. Recreate by navigating to this folder and running npm run dev to start the server. When you load the page, you should see my portfolio but no content (due to this bug).
State inside of React Dev Tools (component is called _default for this state):
bchampp
commented
4 years ago
Trying to refactor to next.js for pre-rendering and SSR. Unfortunately, the React State is playing games with me.
Inside of index.js, I'm loading a JSON file with all of the content for the website. I have a function called from componentDidMount() which loads this JSON file and calls setState(). The problem that I'm having is that it isn't passing in this updatedState to the render function of my component. What's even weirder, is that when I console log the state inside this component, I'm getting the expected value (the content from the JSON) in the browser. However, next.js also console logs to the terminal my server is running on, and it's logging the empty state object thats initialized in the constructor.
Moreover, the Component Inspector in React Dev Tools is reflecting the proper state. But none of my sub components from Index are receiving this correct state.
TLDR: State is being loaded properly and reflecting inside of chrome, however in the server terminal it's the empty object thats initialized in the constructor. None of my components are receiving the state as props and its causing everything to not mount properly and be empty.
The next-js refactor is on branch 'nextjs-refactor' and is in a folder called next-version. Recreate by navigating to this folder and running npm run dev to start the server. When you load the page, you should see my portfolio but no content (due to this bug).
State inside of React Dev Tools (component is called _default for this state):
State logging inside the terminal: