score:2
the issue occurs because state
is undefined
when running on the server, so it'll throw an error when setting the value on the useeffect
's dependency array: [state.basket]
.
there are several ways this could be fixed, but one of them is to return an empty object from initialstate
if typeof window !== 'undefined'
is false
.
export const stateprovider = ({ children }) => {
const initialstate = () => {
if (typeof window !== 'undefined') {
return {
basket:
window.localstorage.getitem('basket') === null
? []
: window.localstorage.getitem('basket'),
viweditems: [],
saved: [],
};
}
return {
basket: [],
vieweditems: [],
saved: []
}; // add this so `state` is not undefined on the server-side
};
const [state, dispatch] = usereducer(productreducer, initialstate());
useeffect(() => {
window.localstorage.setitem('basket', state.basket);
}, [state.basket]); // accessing `state.basket` will no longer throw an error
//...
}
Source: stackoverflow.com
Related Query
- How to setup and use local storage in next js
- How to use local or session storages in next js
- How to deal with local storage and SSR?
- How to use renderArrowPrev in React Responsive Carousel to implement next and previous functionality?
- How to use useMemo instead of a local state using javascript and react?
- How to use react-redux with next js and class components
- How to setup environment variable in Gitlab CI and make it testable in local
- How can I use Local fonts in theme UI in next JS?
- How can I use local Storage with the login functionality in react
- How use Local Storage in Functional Component React
- How can I setup my local .env files for APP and API
- How to Create global styles with Styled components in react and next js and is it better to use combination of css files and styled component?
- How to use local storage in React js
- ReactJS + Redux: How to use Mozilla File API to select local image and upload it to web?
- How to use local storage to access combined reducer values React-Redux
- Relay local state management. How to add and use flag on client side?
- How to import and use images in next js?
- How to store specific API data in local storage and show those data to another page in ReactJs?
- How to get object value from an array in the local storage and compare it with a new value?
- how to call a rest api to fetch json and use it in next variable in react js
- Get and use the previous state from local storage
- How do i set the state from one API call and use the data for URL in next API call?
- Webpack how to build production code and how to use it
- When to use native React.useReducer Hook and how it differentiate from Redux
- React Formik : how to use custom onChange and onBlur
- What does jest.fn() do and how can I use it?
- How to use 'theme' and 'props' in makeStyles?
- How to use csrf_token in Django RESTful API and React?
- React Native - how to use local SVG file (and color it)
- How use react-redux connect with mapStateToProps,MapDispatchToProps and redux-router
More Query from same tag
- map return undefined array of object?
- If there are many fields in form is it reasonable to create React.useState for each of it?
- React functional components, setState and immutability
- My React App has unfixable High Severity warnings, how do I fix this?
- how to fetch data with nextjs from backend API end point in production
- Render a component after a timeout through pure CSS
- VS Code shows 'JSX element type 'MdxBlogPost' does not have any construct or call signatures.ts(2604)' when importing an MDX file in NextJS
- Navigate from parent to child in react where each component defines its own routes
- Pass props created in app.jsx level through react router
- Working with global document object in nextjs
- Percentage loading bar for React / Redux app like Pace.js that only shows on initial page load
- Using React to restrict/allow resource based on client ip address
- How to insert post method with mongoose having a reference in node.js
- chakra ui text and icons do not line up horizontally
- flow: transforming union type of multiple strings into new type
- history.replace in react-router-dom v6
- What is MobileTearSheet and where is it?
- How to use conditional rendering using class name in React?
- Wait for Redux props and then do some operations on the props in componentDidMount
- Get a WOEID from Lat/Long Co-ordinates
- Dispatching an action in a debounced function using redux-thunk
- How to set the correct typescript type for setValue in react-hook-form?
- how can I make a function which will return a number of Schedule Dates that are matching with other Item_date from my database
- How can I show the button only in parent element?
- Video Render in NEXTJS
- React.js rendering differences with Bootstrap 3
- Having issues using axios to handle my JSON data
- Cannot find module issue with imports-loader when testing with Jest
- Publish/subscribe Meteor returns a whole Collection
- problem with rendering components wrapped in table