I am using this to store state in a React app(hooks based) instead of redux.
import React, { createContext, useContext, useReducer } from "react";
//Prepares the datalayer
export const StateContext = createContext()
//Wrap our app and provide the data layer
export const StateProvider = ({ reducer, initialState, children }) => (
<StateContext.Provider value={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
)
//Pull information from the data layer
export const useStateValue = () => useContext(StateContext)
//Accepts a context object (the value returned from React.createContext) and returns the current context value, as given by the nearest context provider for the given context.
I am using above as:
import React,{useState} from 'react'
import { useHistory } from 'react-router-dom';
import { useStateValue } from '../../store/StateProvider';
function Header() {
const [{ basket, user }, dispatch] = useStateValue();
const logout = () => {
dispatch({
type:'DELETE_USER'
})
history.replace('/')
}
return (
<>
<button className="btn-logout" onClick={ logout } tabIndex="0">
{ user ? ('Logout') : '' }
</button>
</>
)
}
export default Header
When I run 'npm test'
This error is shown:
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
5 | function Header() {
6 | let history = useHistory();
> 7 | const [{ basket, user }, dispatch] = useStateValue();
| ^
8 |
9 | const logout = () => {
10 | dispatch({
at Header (src/components/header/Header.js:7:42)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
at node_modules/react-dom/cjs/react-dom.development.js:26021:7
at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
at node_modules/@testing-library/react/dist/pure.js:99:25
at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at render (node_modules/@testing-library/react/dist/pure.js:95:26)
at Object.<anonymous> (src/components/header/Header.test.js:30:5)
console.error
Error: Uncaught [TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))]
at reportException (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivinghelpers
untime-script-errors.js:62:24)
at innerInvokeEventListeners (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:333:9)
at invokeEventListeners (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivinggeneratedEventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:3994:16)
at invokeGuardedCallback (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:4056:31)
at beginWork$1 (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:23964:7)
at performUnitOfWork (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:22779:12) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at Header (C:UsersShubhDesktop
eact-star-warssrccomponentsheaderHeader.js:7:42)
at renderWithHooks (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:14985:18)
at mountIndeterminateComponent (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:17811:13)
at beginWork (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:19049:16)
at HTMLUnknownElement.callCallback (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivinggeneratedEventListener.js:26:30)
at innerInvokeEventListeners (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:318:25)
at invokeEventListeners (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivingeventsEventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (C:UsersShubhDesktop
eact-star-wars
ode_modulesjsdomlibjsdomlivinggeneratedEventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:3994:16)
at invokeGuardedCallback (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:4056:31)
at beginWork$1 (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:23964:7)
at performUnitOfWork (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:22779:12)
at workLoopSync (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:22707:5)
at renderRootSync (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:22670:7)
at performSyncWorkOnRoot (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:22293:18)
at scheduleUpdateOnFiber (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:21881:7)
at updateContainer (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:25482:3)
at C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:26021:7
at unbatchedUpdates (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:22431:12)
at legacyRenderSubtreeIntoContainer (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:26020:5)
at Object.render (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:26103:10)
at C:UsersShubhDesktop
eact-star-wars
ode_modules@testing-library
eactdistpure.js:99:25
at batchedUpdates$1 (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom.development.js:22380:12)
at act (C:UsersShubhDesktop
eact-star-wars
ode_modules
eact-domcjs
eact-dom-test-utils.development.js:1042:14)
at render (C:UsersShubhDesktop
eact-star-wars
ode_modules@testing-library
eactdistpure.js:95:26)
at Object. (C:UsersShubhDesktop
eact-star-warssrccomponentsheaderHeader.test.js:30:5)
at Promise.then.completed (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-circusuildutils.js:276:28)
at new Promise ()
at callAsyncCircusFn (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-circusuildutils.js:216:10)
at _callCircusTest (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-circusuild
un.js:212:40)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at _runTest (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-circusuild
un.js:149:3)
at _runTestsForDescribeBlock (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-circusuild
un.js:63:9)
at _runTestsForDescribeBlock (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-circusuild
un.js:57:9)
at run (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-circusuild
un.js:25:3)
at runAndTransformResultsToJestFormat (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-circusuildlegacy-code-todo-rewritejestAdapterInit.js:176:21)
at jestAdapter (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-circusuildlegacy-code-todo-rewritejestAdapter.js:109:19)
at runTestInternal (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-runneruild
unTest.js:380:16)
at runTest (C:UsersShubhDesktop
eact-star-wars
ode_modulesjest-runneruild
unTest.js:472:34)
at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:28)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
console.error
The above error occurred in the component:
at Header (C:UsersShubhDesktop
eact-star-warssrccomponentsheaderHeader.js:6:19)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
at callCallback (node_modules/react-dom/cjs/react-dom.developmen
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…