Uncaught TypeError: Object is not iterable when using useReducer with useContext for global store React js

Question

我正在尝试使用 hooks 将 redux store 替换为 action 和 reducers 我使用 createContext 创建了一个全局存储，使用 useReducer 创建了一个全局 reducer，并尝试在下面的文件中使用全局状态对象和 useContext ，这是抛出错误。另外，我尝试在控制台记录 useContext(Store) 的 return 值，它给出了 undefined.

import React, {useContext, useEffect} from 'react'
import {newAction} from './actions'
import Store from '../../utils/store'
const Home = ()=>{
    console.log(Store)
    const [appStore, dispatch] = useContext(Store)
    useEffect(()=>{
        
        dispatch(newAction())
        console.log(appStore)
    },[]) 
    return(<div>Hello there</div>)
}

export default Home

在第 const [appStore, dispatch] = useContext(Store)

行出现错误

index.jsx:7 Uncaught TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) at Home (index.jsx:7) at renderWithHooks (react-dom.development.js:14803)

我的App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/home';
import './styles/index.scss'
import {StoreProvider} from './utils/store'

function App() {
  return (
    <div className="App">
    <StoreProvider>
      <Home/>
    </StoreProvider>
    
    </div>
  );
}

export default App;

我的Store/index.js

import {createContext} from 'react'

const Store = createContext({});

export const StoreProvider = Store.Provider;

export default Store;

contextProvider.js

import React,{useReducer} from 'react';
import {ContextProvider} from './index'
import reducer from './combineReducer'

const initialState = { home:{} }

const StoreProvider = (props) =>{
    return <ContextProvider value={useReducer(reducer, initialState)}>
        {props.children}
    </ContextProvider>
}
export default StoreProvider

combineReducer.js

import homeReducer from '../../pages/home/reducer'
export default mainReducer = (initialState, action)=>{
    return({
        home: homeReducer(initialState.home, action)
    })
}

home/reducer.js

import {NEW_ACTION} from './actions'
export default reducer = (state,action) =>{
    switch(action.type){
        case NEW_ACTION: return {...state, val:true}
        default: return state
    }
}

Answer 1

以下文件中的代码几乎没有错误：

在文件Store/index.js中将变量StoreProvider重命名为 ContextProvider 因为我正在使用 ContextProvider 那里没有定义。
在文件 App.js 中将导入行 import {StoreProvider} from './utils/store' 更改为 import StoreProvider from './utils/store/contextProvider'，因为提供程序已写入 contextProvider 文件。

修复后的文件：

Store/index.js

import {createContext} from 'react'
const Store = createContext({});
export const ContextProvider = Store.Provider;
export default Store;

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/home';
import './styles/index.scss'
import StoreProvider from './utils/store/contextProvider'
function App() {
  return (
    <div className="App">
    <StoreProvider>
      <Home/>
    </StoreProvider>
    </div>
  );
}
export default App;

Uncaught TypeError: Object is not iterable when using useReducer with useContext for global store React js

Uncaught TypeError: Object is not iterable when using useReducer with useContext for global store React js

javascript

reactjs

react-hooks

use-reducer

use-context