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.
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
显示此错误：
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)
控制台错误 错误：未捕获 [TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))] at reportException (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:62:24) 在innerInvokeEventListeners (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:333:9) 在 invokeEventListeners (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:274:3) 在 HTMLUnknownElementImpl._dispatch (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:221:9) 在 HTMLUnknownElementImpl.dispatchEvent (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:94:17) 在 HTMLUnknownElement.dispatchEvent (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:231:34) 在 Object.invokeGuardedCallbackDev (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:3994:16) 在 invokeGuardedCallback (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:4056:31) 在 beginWork$1 (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:23964:7) at performUnitOfWork (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:22779:12) TypeError: undefined is not iterable (cannot read property Symbol(符号.迭代器)) 在标题 (C:\Users\Shubh\Desktop\react-star-wars\src\components\header\Header.js:7:42) 在 renderWithHooks (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:14985:18) 在 mountIndeterminateComponent (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:17811:13) 在开始工作 (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:19049:16) 在 HTMLUnknownElement.callCallback (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:3945:14) 在 HTMLUnknownElement.callTheUserObjectsOperation (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\generated\EventListener.js:26:30) 在innerInvokeEventListeners (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:318:25) 在 invokeEventListeners (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:274:3) 在 HTMLUnknownElementImpl._dispatch (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:221:9) 在 HTMLUnknownElementImpl.dispatchEvent (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:94:17) 在 HTMLUnknownElement.dispatchEvent (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:231:34) 在 Object.invokeGuardedCallbackDev (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:3994:16) 在 invokeGuardedCallback (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:4056:31) 在 beginWork$1 (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:23964:7) 在 performUnitOfWork (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:22779:12) 在 workLoopSync (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:22707:5) 在 renderRootSync (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:22670:7) 在 performSyncWorkOnRoot (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:22293:18) 在 scheduleUpdateOnFiber (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:21881:7) 在 updateContainer (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:25482:3) 在 C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:26021:7 在 unbatchedUpdates (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:22431:12) 在 legacyRenderSubtreeIntoContainer (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:26020:5) 在 Object.render (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:26103:10) 在 C:\Users\Shubh\Desktop\react-star-wars\node_modules@testing-library\react\dist\pure.js:99:25 在 batchedUpdates$1 (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom.development.js:22380:12) 在行动 (C:\Users\Shubh\Desktop\react-star-wars\node_modules\react-dom\cjs\react-dom-test-utils.development.js:1042:14) 在渲染 (C:\Users\Shubh\Desktop\react-star-wars\node_modules@testing-library\react\dist\pure.js:95:26) 在对象。 (C:\Users\Shubh\Desktop\react-star-wars\src\components\header\Header.test.js:30:5) 在 Promise.then.completed (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-circus\build\utils.js:276:28) 在新的承诺 () 在 callAsyncCircusFn (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-circus\build\utils.js:216:10) 在 _callCircusTest (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-circus\build\run.js:212:40) 在 processTicksAndRejections (internal/process/task_queues.js:97:5) 在 _runTest (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-circus\build\run.js:149:3) 在 _runTestsForDescribeBlock (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-circus\build\run.js:63:9) 在 _runTestsForDescribeBlock (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-circus\build\run.js:57:9) 运行时 (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-circus\build\run.js:25:3) 在 runAndTransformResultsToJestFormat (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-circus\build\legacy-code-todo-rewrite\jestAdapterInit.js:176:21) 在 jestAdapter (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-circus\build\legacy-code-todo-rewrite\jestAdapter.js:109:19) 在 runTestInternal (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-runner\build\runTest.js:380:16) 在 runTest (C:\Users\Shubh\Desktop\react-star-wars\node_modules\jest-runner\build\runTest.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)
控制台错误 组件出现上述错误：
at Header (C:\Users\Shubh\Desktop\react-star-wars\src\components\header\Header.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.development.js:12318:12)
at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
测试套件：1 个失败，总共 1 个 测试：1 次失败，总共 1 次
